<template>
	<!-- 车辆基本信息页面 -->
	<div>
		<!-- 搜索页面 -->
		<el-form ref="carInfoSearch" :model="carInfoSearch" size="small" :inline="true" class="query-form">
			<el-form-item prop="carNumber">
				<el-input size="small" autocomplete="off" v-model="carInfoSearch.carNumber" maxlength="7"
					placeholder="车牌号"></el-input>
			</el-form-item>
			<el-form-item prop="brand">
				<el-input size="small" autocomplete="off" v-model="carInfoSearch.brand" maxlength="10" placeholder="品牌">
				</el-input>
			</el-form-item>
			<!-- <el-form-item prop="carframeno">
				<el-input size="small" autocomplete="off" v-model="carInfoSearch.carframeno" maxlength="18"
					minlength="6" placeholder="车架号"></el-input>
			</el-form-item>
			<el-form-item prop="engineno">
				<el-input size="small" autocomplete="off" v-model="carInfoSearch.engineno" maxlength="6" minlength="6"
					placeholder="发动机号"></el-input>
			</el-form-item> -->
			<el-form-item prop="carstatus">
				<el-select v-model="carInfoSearch.carstatus" placeholder="状态"
					style="width: 100%">
					<el-option v-for="item in $dictUtils.getDictList('carstatus')"
						:key="item.value" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item prop="seatNumber">
				<el-select v-model="carInfoSearch.seatNumber" placeholder="载客人数"
					style="width: 100%">
					<el-option v-for="item in $dictUtils.getDictList('seat_number')"
						:key="item.value" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item style="float: right">
				<el-button size="small" type="primary" @click="searchUsers">查询</el-button>
				<el-button size="small" style="margin-left: 10px" @click="resetsearchUsers">重置</el-button>
			</el-form-item>
		</el-form>
		<!-- 内容页面 -->
		<div style="background-color: #fff; padding: 10px">
			<!-- 按钮 -->
			<div>
				<el-button size="small" icon="el-icon-circle-close" @click="cancelChoose()">取消选择</el-button>
				<el-button size="small" icon="el-icon-circle-plus-outline" type="primary" @click="addCar()">添加
				</el-button>
				<el-button size="small" icon="el-icon-delete" type="danger" @click="deleteCar()"
					:disabled="this.checkId == ''">删除</el-button>
				<el-button size="small" icon="el-icon-circle-plus-outline" type="primary" @click="modifyCar()"
					:disabled="this.checkId == ''||checkCarNum.length>1">修改</el-button>
				<!-- 添加弹框 -->
				<el-dialog title="添加车辆基本信息" width="50%" :visible.sync="addCarInfoDialog">
					<el-form ref="addCarInfo" :model="addCarInfo" size="small">
						<el-row>
							<el-col :span="12">
								<el-form-item label="使用性质" prop="usepProperty" label-width="110px" :rules="[{required: true, message:'使用性质不能为空', trigger:'blur'}]">
									<el-select v-model="addCarInfo.usepProperty" placeholder="请选择"  style="width: 100%;">
										<el-option v-for="item in $dictUtils.getDictList('use_property')" :key="item.value" :label="item.label" :value="item.value"></el-option>
									</el-select>
							   </el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="是否新能源车" prop="isnewcar" label-width="110px" :rules="[{required: true, message:'是否新能源汽车不能为空', trigger:'blur'}]">
									<el-select v-model="addCarInfo.isnewcar" placeholder="请选择"  style="width: 100%;">
										<el-option v-for="item in $dictUtils.getDictList('yes_no')" :key="item.value" :label="item.label" :value="item.value"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="车辆类型" label-width="110px" prop="cartype" :rules="[
								{ required: true, message: '请输入车辆类型', trigger: 'blur', }, ]">
									<el-select v-model="addCarInfo.cartype" placeholder="请选择" style="width: 100%">
										<el-option v-for="item in $dictUtils.getDictList('car_type')" :key="item.value"
											:label="item.label" :value="item.value"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="品牌" label-width="110px" prop="brand" :rules="[
								{ required: true, message: '请输入品牌(不能包含符号)', trigger: 'blur', pattern: /^[A-Za-z0-9\u4e00-\u9fa5]*$/, }, ]">
									<el-input v-model="addCarInfo.brand" maxlength="8"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12" v-if="addCarInfo.isnewcar==0&&addCarInfo.isnewcar!=''">
								<el-form-item label="车牌号" label-width="110px" prop="carno"
									:rules="[{ required: true, message: '请输入正确车牌号', trigger: 'blur', pattern: /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/, }, ]">
									<el-input v-model="addCarInfo.carno" maxlength="8" minlength="8"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12" v-if="addCarInfo.isnewcar==1&&addCarInfo.isnewcar!=''">
								<el-form-item label="车牌号" label-width="110px" prop="carno"
									:rules="[{ required: true, message: '请输入正确车牌号', trigger: 'blur', pattern: /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/, }, ]">
									<el-input v-model="addCarInfo.carno" maxlength="7" minlength="7"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="车架号" label-width="110px" prop="carframeno"
									:rules="[
								{ required: true, message: '请输入车架号(可以包含大小写字母和数字，长度位6-18位)', trigger: 'blur', pattern: /^([A-Za-z0-9]{6,18})$/, }, ]">
									<el-input v-model="addCarInfo.carframeno" maxlength="18" minlength="6"></el-input>
								</el-form-item>
							</el-col>
							<!-- <el-col :span="12">
								<el-form-item label="行车证" label-width="110px" prop="licence" :rules="[
								{ required: true, message: '请输入行车证(13位数字)', trigger: 'blur', pattern: /^[0-9]{13}$/, }, ]">
									<el-input v-model="addCarInfo.licence" maxlength="13" minlength="13"></el-input>
								</el-form-item>
							</el-col> -->
							<el-col :span="12">
								<el-form-item label="发动机号" label-width="110px" prop="engineno" :rules="[
								{ required: true, message: '请输入发动机号(6-20位数字)', trigger: 'blur', pattern: /^[0-9]{6,20}$/, }, ]">
									<el-input v-model="addCarInfo.engineno" maxlength="20" minlength="6"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="生产日期" label-width="110px" prop="productdate" :rules="[
								{ required: true, message: '请输入生产日期', trigger: 'blur', }, ]">
									<el-date-picker v-model="addCarInfo.productdate" style="width: 100%"
										format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
									</el-date-picker>
								</el-form-item>
							</el-col>
							<!-- <el-col :span="12">
								<el-form-item label="车辆状态" label-width="110px" prop="carstatus" :rules="[
								{ required: true, message: '请选择车辆状态', trigger: 'blur', }, ]">
									<el-select v-model="addCarInfo.carstatus" placeholder="请选择" style="width: 100%">
										<el-option v-for="item in $dictUtils.getDictList('carstatus')"
											:key="item.value" :label="item.label" :value="item.value"></el-option>
									</el-select>
								</el-form-item>
							</el-col> -->
							<el-col :span="12">
								<el-form-item label="注册日期" label-width="110px" prop="registeredDate"
									:rules="[ {required: true, message:'注册日期不能为空', trigger:'blur'} ]">
									<el-date-picker v-model="addCarInfo.registeredDate" type="datetime"
										style="width: 100%;" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
										placeholder="选择日期时间"> </el-date-picker>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="载客人数" prop="seatNumber" label-width="110px" :rules="[{required: true, message:'载客人数数不能为空', trigger:'blur'},{validator: validator.isIntGtZero, trigger:'blur'}]">
								    <el-select v-model="addCarInfo.seatNumber" placeholder="请选择"  style="width: 100%;">
										<el-option  v-for="item in $dictUtils.getDictList('seat_number')" :key="item.value" :label="item.label" :value="item.value"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							
							<el-col :span="12">
								<el-form-item label="车辆所有人" prop="carOwner" label-width="110px" :rules="[{required: true, message:'车辆所有人不能为空', trigger:'blur'}]">
									<el-input v-model="addCarInfo.carOwner" placeholder="请填写车辆所有人"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="管理员" prop="administrator.id" label-width="110px"
									:rules="[ {required: true, message:'管理员不能为空', trigger:'blur'} ]">
									<user-select :limit='1' :value="addCarInfo.administrator.id"
										@getValue='(value) => {addCarInfo.administrator.id=value}'></user-select>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="车辆里程(KM)" prop="mileage" label-width="110px"
									:rules="[ {required: true, message:' 车辆里程不能为空', trigger:'blur'}, {validator: validator.isIntGtZero, trigger:'blur'} ]">
									<el-input v-model="addCarInfo.mileage" placeholder="请填写车辆里程"></el-input>
								</el-form-item>
							</el-col>
							<el-col>
								<div>
									<el-form-item label="车/证照片" label-width="110px" prop="licencepic">
										<el-upload ref="pictureCar"
											:action="`${this.$http.BASE_URL}/dlyrlTest/fileUpload`"
											:headers="{ token: $cookie.get('token') }"
											:on-preview="(file, fileList) => { $window.location.href = (file.response && file.response.url) || file.url; }"
											:on-success="(response, file, fileList) => {
												addCarInfo.licencepic = fileList
													.map(
													  (item) =>
														(item.response && item.response.url) || item.url
													)
													.join('|');
												}" :on-remove="(file, fileList) => {
												$http.post( `/dlyrlTest/deleteFile?path=${ (file.response && file.response.url) || file.url }` )
												.then(({ data }) => { $message.success(data.msg); });
												addCarInfo.licencepic = fileList
												.map((item) => item.url)
												.join('|');}" :before-remove=" (file, fileList) => { return $confirm(`确定移除 ${file.name}？`); }" multiple
											:limit="6"
											:on-exceed="(files, fileList) => { $message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length } 个文件，共选择了 ${ files.length + fileList.length } 个文件` ); }">
											<el-button size="small" type="primary">点击上传</el-button>
										</el-upload>
									</el-form-item>
								</div>
							</el-col>
						</el-row>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button size="small" @click="addCarInfoDialog = false">关闭</el-button>
						<el-button size="small" @click="confirmCarAdd()">确定</el-button>
					</div>
				</el-dialog>
				<!-- 修改信息弹框 -->
				<el-dialog title="编辑车辆基本信息" width="50%" :visible.sync="modifyCarInfoDialog">
					<el-form ref="modifyCarInfo" :model="modifyCarInfo" size="small">
						<el-row>
							<el-col :span="12">
								<el-form-item label="使用性质" label-width="110px" prop="usepProperty" :rules="[{required: true, message:'使用性质不能为空', trigger:'blur'}]">
									<el-select v-model="modifyCarInfo.usepProperty" placeholder="请选择"  style="width: 100%;">
										<el-option v-for="item in $dictUtils.getDictList('use_property')" :key="item.value" :label="item.label" :value="item.value"></el-option>
									</el-select>
							   </el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="是否新能源车" label-width="110px" prop="isnewcar" :rules="[{required: true, message:'是否新能源汽车不能为空', trigger:'blur'}]">
									<el-select v-model="modifyCarInfo.isnewcar" placeholder="请选择"  style="width: 100%;">
										<el-option v-for="item in $dictUtils.getDictList('yes_no')" :key="item.value" :label="item.label" :value="item.value"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="车辆类型" label-width="110px" prop="cartype" :rules="[
								{ required: true, message: '请输入车辆类型', trigger: 'blur', }, ]">
									<el-select v-model="modifyCarInfo.cartype" placeholder="请选择" style="width: 100%">
										<el-option v-for="item in $dictUtils.getDictList('car_type')" :key="item.value"
											:label="item.label" :value="item.value"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="品牌" label-width="110px" prop="brand" :rules="[
								{ required: true, message: '请输入品牌(不能包含符号)', trigger: 'blur', pattern: /^[A-Za-z0-9\u4e00-\u9fa5]*$/, }, ]">
									<el-input v-model="modifyCarInfo.brand" maxlength="8"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="车牌号" label-width="110px" prop="carno"
									:rules="[
								{ required: true, message: '请输入车牌号', trigger: 'blur', pattern: /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/, }, ]">
									<el-input v-model="modifyCarInfo.carno" maxlength="7" minlength="7"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="车架号" label-width="110px" prop="carframeno"
									:rules="[
								{ required: true, message: '请输入车架号(可以包含大小写字母和数字，长度位17位)', trigger: 'blur', pattern: /^([A-Za-z0-9]{17,17})$/, }, ]">
									<el-input v-model="modifyCarInfo.carframeno" maxlength="18" minlength="6">
									</el-input>
								</el-form-item>
							</el-col>
							<!-- <el-col :span="12">
								<el-form-item label="行车证" label-width="110px" prop="licence" :rules="[
								{ required: true, message: '请输入行车证(13位数字)', trigger: 'blur', pattern: /^[0-9]{13}$/, }, ]">
									<el-input v-model="modifyCarInfo.licence" maxlength="13" minlength="13"></el-input>
								</el-form-item>
							</el-col> -->
							<el-col :span="12">
								<el-form-item label="发动机号" label-width="110px" prop="engineno" :rules="[
								{ required: true, message: '请输入发动机号(6位数字)', trigger: 'blur', pattern: /^[0-9]{6}$/, }, ]">
									<el-input v-model="modifyCarInfo.engineno" maxlength="6" minlength="6"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="生产日期" label-width="110px" prop="productdate" :rules="[
									{ required: true, message: '请输入生产日期', trigger: 'blur', }, ]">
									<el-date-picker v-model="modifyCarInfo.productdate" style="width: 100%"
										format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
									</el-date-picker>
								</el-form-item>
							</el-col>
							<!-- <el-col :span="12">
									<el-form-item label="车辆状态" label-width="110px" prop="carstatus" :rules="[
									{ required: true, message: '请选择车辆状态', trigger: 'blur', }, ]">
										<el-select v-model="modifyCarInfo.carstatus" placeholder="请选择"
											style="width: 100%">
											<el-option v-for="item in $dictUtils.getDictList('carstatus')"
												:key="item.value" :label="item.label" :value="item.value"></el-option>
										</el-select>
									</el-form-item>
							</el-col> -->
							<el-col :span="12">
								<el-form-item label="注册日期" label-width="110px" prop="registeredDate"
									:rules="[ {required: true, message:'注册日期不能为空', trigger:'blur'} ]">
									<el-date-picker v-model="modifyCarInfo.registeredDate" type="datetime"
										style="width: 100%;" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
										placeholder="选择日期时间"> </el-date-picker>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="载客人数" prop="seatNumber" label-width="110px" :rules="[{required: true, message:'载客人数不能为空', trigger:'blur'},{validator: validator.isIntGtZero, trigger:'blur'}]">
								    <el-select v-model="modifyCarInfo.seatNumber" placeholder="请选择"  style="width: 100%;">
										<el-option  v-for="item in $dictUtils.getDictList('seat_number')" :key="item.value" :label="item.label" :value="item.value"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							
							<el-col :span="12">
								<el-form-item label="车辆所有人" label-width="110px" prop="carOwner" :rules="[{required: true, message:'车辆所有人不能为空', trigger:'blur'}]">
									<el-input v-model="modifyCarInfo.carOwner" placeholder="请填写车辆所有人"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="管理员" prop="administrator.id" label-width="110px"
									:rules="[ {required: true, message:'管理员不能为空', trigger:'blur'} ]">
									<user-select :limit='1' :value="modifyCarInfo.administrator.id"
										@getValue='(value) => {modifyCarInfo.administrator.id=value}'></user-select>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="车辆里程(KM)" prop="mileage" label-width="110px"
									:rules="[ {required: true, message:' 车辆里程不能为空', trigger:'blur'}, {validator: validator.isIntGtZero, trigger:'blur'} ]">
									<el-input v-model="modifyCarInfo.mileage" placeholder="请填写车辆里程"></el-input>
								</el-form-item>
							</el-col>
							<el-col>
								<el-form-item label="车/证照片" prop="licencepic" label-width="110px"
									:rules="[ {required: true, message:'车辆照片不能为空', trigger:'blur'} ]">
									<el-upload ref="licencepic" v-if="visible" list-type="picture-card"
										:action="`${this.$http.BASE_URL}/sys/file/webupload/upload?uploadPath=/dlyrl.oa.carinfo/oaCarinfo`"
										:headers="{token: $cookie.get('token')}" :on-preview="(file, fileList) => {
												$alert(`<img style='width:100%' src=' ${(file.response && file.response.url) || file.url}'/>`,  {
												  dangerouslyUseHTMLString: true,
												  showConfirmButton: false,
												  closeOnClickModal: true,
												  customClass: 'showPic'
												});
											}" :on-success="(response, file, fileList) => {
											   modifyCarInfo.licencepic = fileList.map(item => (item.response && item.response.url) || item.url).join('|')
											}" :on-remove="(file, fileList) => {
											  $http.post(`/sys/file/webupload/deleteByUrl?url=${(file.response && file.response.url) || file.url}`).then(({data}) => {
												$message.success(data.msg)
											  })
											  modifyCarInfo.licencepic = fileList.map(item => item.url).join('|')
											}" :before-remove="(file, fileList) => {
											  return $confirm(`确定移除 ${file.name}？`)
											}" multiple :limit="5" :on-exceed="(files, fileList) =>{
											  $message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
											}" :file-list="pictureCars">
										<i class="el-icon-plus"></i>
									</el-upload>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button size="small" @click="modifyCarInfoDialog = false">关闭</el-button>
						<el-button size="small" @click="confirmCarModify()">确定</el-button>
					</div>
				</el-dialog>
			</div>
			<!-- 车辆基本信息 -->
			<div style="margin-top: 10px">
				<el-table :data="carInfoTable" @selection-change="selectiocarInfo" height="calc(100% - 80px)"
					size="small" ref="CarInfo" :cell-style="cellStyle"
					style="border: 1px solid #d6cfe2; min-height: 370px" :header-cell-class-name="cellHeadStyle"
					:row-class-name="tableRowClassName"
					:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" v-loading="carInfoLoading"
					row-key="id" class="table">
					<el-table-column type="selection" width="55" align="center"></el-table-column>
					<el-table-column prop="carno" show-overflow-tooltip  label="车牌号" align="center">
						<template slot-scope="scope">
							<el-link type="primary" :underline="false" @click="carListdetails(scope.row)">
								{{scope.row.carno}}
							</el-link>
						</template>
					</el-table-column>
					<el-table-column prop="productdate" label="生产日期" show-overflow-tooltip align="center">
					</el-table-column>
					<el-table-column prop="registeredDate" show-overflow-tooltip label="注册日期" align="center">
					</el-table-column>
					<el-table-column prop="brand" label="品牌" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="cartype" label="车型" show-overflow-tooltip align="center">
						<template slot-scope="scope">
							{{ $dictUtils.getDictLabel("car_type", scope.row.cartype, '-') }}
						</template>
					</el-table-column>
					<el-table-column prop="seatNumber" label="载客人数" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="carframeno" label="车架号" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="engineno" label="发动机号" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="carstatus" label="车辆状态" show-overflow-tooltip align="center">
						<template slot-scope="scope">
							{{ $dictUtils.getDictLabel("carstatus", scope.row.carstatus, '-') }}
						</template>
					</el-table-column>
					<el-table-column prop="user.name" label="使用人" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="driver.name" label="司机" show-overflow-tooltip align="center"></el-table-column>
					<!-- <el-table-column prop="licence" label="行车证" width="200" show-overflow-tooltip></el-table-column> -->
					<el-table-column prop="licencepic" label="车/证照片" show-overflow-tooltip align="center" width="250">
						<template slot-scope="scope" v-if="scope.row.licencepic">
							<el-image style="height: 50px;width:50px;margin-right:10px;" :src="src"
								v-for="(src, index) in scope.row.licencepic.split('|')" :key="index"
								:preview-src-list="scope.row.licencepic.split('|')"> </el-image>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<el-pagination @size-change="carInfoHandleSize" @current-change="carInfoHandleCurrent"
					:current-page.sync="carInfoPageNo" :page-size="carInfoPageSize"
					layout="total, prev, pager, next, jumper" :total="carInfoTotal" style="margin: 1rem 0">
				</el-pagination>
				<!-- 行车证照片 -->
				<el-dialog width="40%" :visible.sync="carImgDialog">
					<img :src="carLicencepic" style="width: 100%; height: 400px" />
				</el-dialog>
			</div>
			<!-- 汽车详情 -->
			<el-dialog title="汽车详情" width="70%" :visible.sync="carDetailsDialog">
				<el-form ref="carDetails" :model="carDetails" size="small" label-width="120px">
					<el-row>
						<el-col><span style="font-size: 14px; font-weight: 550; color: #2a8bd8"><i class="el-icon-menu"></i>车辆信息：</span></el-col>
					</el-row>
					<el-row>
						<el-col :span="8">
							<el-form-item  prop="carno" label="车牌号">
								<el-input v-model="carDetails.carno" disabled></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item  prop="brand" label="品牌">
								<el-input v-model="carDetails.brand" disabled></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item prop="cartype" label="车型">
								<el-input v-if="carDetails.cartype == 0" disabled value="轿车"></el-input>
								<el-input v-if="carDetails.cartype == 1" disabled value="SUV"></el-input>
								<el-input v-if="carDetails.cartype == 2" disabled value="MPV"></el-input>
								<el-input v-if="carDetails.cartype == 3" disabled value="货车"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item prop="carstatus" label="车辆状态">
								<el-input v-if="carDetails.carstatus == 0" disabled value="空闲中"></el-input>
								<el-input v-if="carDetails.carstatus == 1" disabled value="使用中"></el-input>
								<el-input v-if="carDetails.carstatus == 2" disabled value="维修汇总"></el-input>
								<el-input v-if="carDetails.carstatus == 3" disabled value="车辆异常"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item prop="engineno" label="发动机号">
								<el-input v-model="carDetails.engineno" disabled></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item prop="carframeno" label="车架号">
								<el-input v-model="carDetails.carframeno" disabled></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item prop="licence" label="行车证">
								<el-input v-model="carDetails.licence" disabled></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="载客人数" prop="seatNumber">
							    <el-select v-model="carDetails.seatNumber"  style="width: 100%;" disabled>
									<el-option  v-for="item in $dictUtils.getDictList('seat_number')" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item prop="productdate" label="生产日期">
								<el-input v-model="carDetails.productdate" disabled></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="注册日期" prop="registeredDate">
								<el-date-picker v-model="carDetails.registeredDate" disabled type="datetime"
									style="width: 100%;" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
									placeholder=""> </el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="使用性质" prop="usepProperty">
								<el-select v-model="carDetails.usepProperty" placeholder=""  style="width: 100%;" disabled>
									<el-option v-for="item in $dictUtils.getDictList('use_property')" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
						   </el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="是否新能源车" prop="isnewcar">
								<el-select v-model="carDetails.isnewcar" placeholder=""  style="width: 100%;" disabled>
									<el-option v-for="item in $dictUtils.getDictList('yes_no')" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="使用人" prop="user.driver">
								<el-input v-model="carDetails.user.name" placeholder="" disabled></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="司机" prop="driver">
								<el-input v-model="carDetails.driver.name" placeholder="" disabled></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="车辆所有人" prop="carOwner">
								<el-input v-model="carDetails.carOwner" placeholder="" disabled></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<!-- 保养记录 -->
					<el-row>
						<el-col><span style="font-size: 14px; font-weight: 550; color: #2a8bd8"><i class="el-icon-menu"></i>保养记录：</span></el-col>
					</el-row>
					<el-row>
						<el-table :data="carDetails.oaCarinfoMaintainLogList" :cell-style="cellStyle"
							:header-cell-class-name="cellHeadStyle" style="border: 1px solid #d6cfe2; margin-top: 20px"
							size="small" row-key="id" :row-class-name="tableRowClassName"
							:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" ref="maintainTable">
							<el-table-column prop="operatortime" label="创建时间" show-overflow-tooltip>
								<template slot-scope="scope">
									{{ scope.row.operatortime | formatDateNumber }}
								</template>
							</el-table-column>
							<el-table-column prop="content" label="保养内容" show-overflow-tooltip></el-table-column>
							<el-table-column prop="maintaindate" label="保养日期" show-overflow-tooltip></el-table-column>
							<el-table-column prop="taincontract" label="保养公司" show-overflow-tooltip></el-table-column>
							<el-table-column prop="place" label="保养地址" show-overflow-tooltip></el-table-column>
							<el-table-column prop="price" label="保养费用(元)" show-overflow-tooltip></el-table-column>
							<el-table-column prop="operator.name" label="操作人" show-overflow-tooltip></el-table-column>
						</el-table>
					</el-row>
					<!-- 维修记录 -->
					<el-row>
						<el-col><span style="font-size: 14px; font-weight: 550; color: #2a8bd8"><i
									class="el-icon-menu"></i>维修记录：</span></el-col>
					</el-row>
					<el-row>
						<el-table :data="carDetails.oaCarinfoRepairLogList" :cell-style="cellStyle"
							:header-cell-class-name="cellHeadStyle" style="border: 1px solid #d6cfe2; margin-top: 20px"
							size="small" row-key="id" :row-class-name="tableRowClassName"
							:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" ref="repairTable">
							<el-table-column prop="operatortime" label="创建时间" show-overflow-tooltip>
							<template slot-scope="scope">
								{{ scope.row.operatortime | formatDateNumber }}
							</template>
							</el-table-column>
							<el-table-column prop="repairdate" label="维修日期" show-overflow-tooltip></el-table-column>
							<el-table-column prop="repairReason" label="维修原因">
								<template slot-scope="scope">
									{{ $dictUtils.getDictLabel("repair_reason", scope.row.repairReason, '-') }}
								</template>
							</el-table-column>
							<el-table-column prop="content" label="维修内容" show-overflow-tooltip></el-table-column>
							<el-table-column prop="repairCompany" show-overflow-tooltip label="维修公司"></el-table-column>
							<el-table-column prop="place" label="维修地址" show-overflow-tooltip></el-table-column>
							<el-table-column prop="price" label="维修费用(元)" show-overflow-tooltip></el-table-column>
							<el-table-column prop="operator.name" label="操作人" show-overflow-tooltip></el-table-column>
						</el-table>
					</el-row>
					<!-- 保险记录 -->
					<el-row>
						<el-col><span style="font-size: 14px; font-weight: 550; color: #2a8bd8"><i
									class="el-icon-menu"></i>保险记录：</span></el-col>
					</el-row>
					<el-row>
						<el-table :data="carDetails.oaCarinfoInsuranceLogList" :cell-style="cellStyle"
							:header-cell-class-name="cellHeadStyle" style="border: 1px solid #d6cfe2; margin-top: 20px"
							size="small" row-key="id" :row-class-name="tableRowClassName"
							:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" ref="insuranceTable">
							<el-table-column prop="operatortime" label="创建时间" show-overflow-tooltip>
								<template slot-scope="scope">
									{{ scope.row.operatortime | formatDateNumber }}
								</template>
							</el-table-column>
							<el-table-column prop="company" show-overflow-tooltip label="保险公司"></el-table-column>
							<el-table-column prop="joindate" label="参保日期" show-overflow-tooltip></el-table-column>
							<el-table-column prop="enddate" label="到期日期" show-overflow-tooltip></el-table-column>
							<el-table-column prop="content" label="保险内容" show-overflow-tooltip></el-table-column>
							<el-table-column prop="price" label="保险费用" show-overflow-tooltip></el-table-column>
							<el-table-column prop="operator.name" label="操作人" show-overflow-tooltip></el-table-column>
						</el-table>
					</el-row>
					<!-- 年检记录 -->
					<el-row>
						<el-col><span style="font-size: 14px; font-weight: 550; color: #2a8bd8"><i
									class="el-icon-menu"></i>年检记录：</span></el-col>
					</el-row>
					<el-row>
						<el-table :data="carDetails.oaCarinfoYearcheckLogList" :cell-style="cellStyle"
							:header-cell-class-name="cellHeadStyle" style="border: 1px solid #d6cfe2; margin-top: 20px"
							size="small" row-key="id" :row-class-name="tableRowClassName"
							:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" ref="inspectTable">
							<el-table-column prop="operatortime" label="创建时间" show-overflow-tooltip>
							<template slot-scope="scope">
								{{ scope.row.operatortime | formatDateNumber }}
							</template>
						</el-table-column>
						<el-table-column prop="checkdate" show-overflow-tooltip label="年检日期"></el-table-column>
						<el-table-column prop="cotent" show-overflow-tooltip label="年检内容"></el-table-column>
						<el-table-column prop="nextDate" show-overflow-tooltip label="下次年检日期"></el-table-column>
						<el-table-column prop="company" show-overflow-tooltip label="年检公司"></el-table-column>
						<el-table-column prop="area" show-overflow-tooltip label="年检地点"></el-table-column>
						<el-table-column prop="operator.name" label="操作人"></el-table-column>
						</el-table>
					</el-row>
					<el-row>
						<el-col><span style="font-size: 14px; font-weight: 550; color: #2a8bd8"><i
									class="el-icon-menu"></i>车辆事故记录：</span></el-col>
					</el-row>
					<el-row>
						<el-table :data="carDetails.oaCarinfoAccidentLogList" :cell-style="cellStyle"
							:header-cell-class-name="cellHeadStyle" style="border: 1px solid #d6cfe2; margin-top: 20px"
							size="small" row-key="id" :row-class-name="tableRowClassName"
							:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" ref="accidentTable">
							<el-table-column prop="operatortime" label="创建时间" show-overflow-tooltip>
							<template slot-scope="scope">
								{{ scope.row.operatortime | formatDateNumber }}
							</template>
							</el-table-column>
							<el-table-column prop="accidentdate" label="事故时间" show-overflow-tooltip></el-table-column>
							<el-table-column prop="content" label="事故原因" show-overflow-tooltip></el-table-column>
							<el-table-column prop="place" label="事故地点" show-overflow-tooltip></el-table-column>
							<el-table-column prop="driver" show-overflow-tooltip label="驾驶人"></el-table-column>
							<el-table-column prop="liability" show-overflow-tooltip label="责任划分(%)"></el-table-column>
							<el-table-column prop="operator.name" label="操作人" show-overflow-tooltip></el-table-column>
						</el-table>
					</el-row>
				</el-form>
			</el-dialog>
			<!-- 附表选项卡 -->
			<el-tabs type="border-card" @tab-click="handleClick" v-model="attachedListNum" style="margin-top: 20px">
				<el-tab-pane label="保养记录">
					<div>
						<el-button size="small" icon="el-icon-circle-plus-outline" type="primary"
							@click="addMaintainCar()" :disabled="this.checkId == ''">添加</el-button>
						<el-button size="small" icon="el-icon-delete" type="danger" @click="maintainDel()"
							:disabled="this.addMaintainCarInfo.car == ''">删除</el-button>
						<el-button size="small" icon="el-icon-circle-close" @click="maintainChoose()">取消选择</el-button>
					</div>
					<el-table :data="maintainInformation" :cell-style="cellStyle" :header-cell-class-name="cellHeadStyle"
						style="border: 1px solid #d6cfe2; margin-top: 20px; min-height: 350px; "
						height="calc(100% - 80px)" size="small" @selection-change="handleRepairSelectionChange"
						:row-class-name="tableRowClassName" row-key="id"
						:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" ref="maintainTable">
						<el-table-column type="selection" width="55" align="center"></el-table-column>
						<el-table-column prop="operatortime" label="创建时间" show-overflow-tooltip>
							<template slot-scope="scope">
								{{ scope.row.operatortime | formatDateNumber }}
							</template>
						</el-table-column>
						<el-table-column prop="nowkilometre" label="当前里程(km)" show-overflow-tooltip></el-table-column>
						<el-table-column prop="intervalkilometre" label="间隔里程(km)" show-overflow-tooltip></el-table-column>.
						<el-table-column prop="nextkilometre" label="下次保养里程(km)" show-overflow-tooltip></el-table-column>
						<el-table-column prop="content" label="保养内容" show-overflow-tooltip></el-table-column>
						<el-table-column prop="maintaindate" label="保养日期" show-overflow-tooltip></el-table-column>
						<el-table-column prop="taincontract" label="保养公司" show-overflow-tooltip></el-table-column>
						<el-table-column prop="place" label="保养地址" show-overflow-tooltip></el-table-column>
						<el-table-column prop="price" label="保养费用(元)" show-overflow-tooltip></el-table-column>
						<el-table-column prop="operator.name" label="操作人" show-overflow-tooltip></el-table-column>
						<el-table-column prop="operator" label="操作" width="220" show-overflow-tooltip
							align="center">
							<template slot-scope="scope">
								<el-button type="text" icon="el-icon-edit" size="mini" @click="redactMaintain(scope.row)">编辑</el-button>
								<el-button type="text" icon="el-icon-delete" size="mini" @click="redactMaintainDel(scope.row.id)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination @size-change="handleMaintainSizeChange" @current-change="handleMaintainCurrentChange"
						:current-page.sync="maintain_pageNo" :page-size="maintain_pageSize"
						layout="total, prev, pager, next, jumper" :total="maintain_total" style="margin: 1rem 0">
					</el-pagination>
				</el-tab-pane>
				<el-dialog title="添加保养记录" width="60%" :visible.sync="insertMaintainCarInfoDialog">
					<el-form ref="addMaintainCarInfo" :model="addMaintainCarInfo" size="small" label-width="120px">
						<el-row>
							<el-col :span="12">
								<el-form-item label="当前里程(km)" prop="nowKilometre" :rules="[
								{ required: true, message: '请输入当前公里数(最多保留两位小数)', trigger: 'blur', pattern: /^\d*\.?(\d|\d{2})$/, }, ]">
									<el-input v-model="addMaintainCarInfo.nowKilometre"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="间隔(km)" prop="intervalkilometre" :rules="[
								{ required: true, message: '请输入当前公里数(最多保留两位小数)', trigger: 'blur', pattern: /^\d*\.?(\d|\d{2})$/, }, ]">
									<el-input v-model="addMaintainCarInfo.intervalkilometre"></el-input>
								</el-form-item>
							</el-col>
							<!-- <el-col :span="12">
								<el-form-item label="下次保养里程(km)" prop="nextKilometre" :rules="[
								{ required: true, message: '请输入下次保养里程(最多保留两位小数)', trigger: 'blur', pattern: /^\d*\.?(\d|\d{2})$/, }, ]">
									<el-input v-model="addMaintainCarInfo.nextKilometre" disabled></el-input>
								</el-form-item>
							</el-col> -->
							<el-col :span="12">
								<el-form-item label="保养日期" prop="maintainDate" :rules="[
								{ required: true, message: '请输入保养日期', trigger: 'blur', }, ]">
									<el-date-picker v-model="addMaintainCarInfo.maintainDate" style="width: 100%"
										format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
									</el-date-picker>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="保养费用(元)" prop="maintainMoney" :rules="[
								{ required: true, message: '请输入保养价格(最多保留两位小数)', trigger: 'blur', pattern: /^\d*\.?(\d|\d{2})$/, }, ]">
									<el-input v-model="addMaintainCarInfo.maintainMoney"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="保养内容" prop="maintainContent" :rules="[
								{ required: true, message: '请输入行保养内容', trigger: 'blur', }, ]">
									<el-input v-model="addMaintainCarInfo.maintainContent" type="textarea"
										:autosize="true"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="保养地址" prop="maintainAddress" :rules="[
								{ required: true, message: '请输入保养地址', trigger: 'blur', }, ]">
									<el-input v-model="addMaintainCarInfo.maintainAddress"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="保养公司" prop="taincontract" :rules="[
								{ required: true, message: '请输入保养公司', trigger: 'blur', }, ]">
									<el-input v-model="addMaintainCarInfo.taincontract"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button size="small" @click="insertMaintainCarInfoDialog = false">取消</el-button>
						<el-button size="small" @click="confirmMaintainCarAdd()">确定</el-button>
					</div>
				</el-dialog>
				<el-dialog title="编辑保养记录" width="60%" :visible.sync="redactMaintainCarInfoDialog">
					<el-form ref="redactMaintainCarInfo" :model="redactMaintainCarInfo" size="small" label-width="120px">
						<el-row>
							<el-col :span="12">
								<el-form-item label="当前里程(km)" prop="nowKilometre" :rules="[
								{ required: true, message: '请输入当前公里数(最多保留两位小数)', trigger: 'blur', pattern: /^\d*\.?(\d|\d{2})$/, }, ]">
									<el-input v-model="redactMaintainCarInfo.nowKilometre"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="间隔(km)" prop="intervalkilometre" :rules="[
								{ required: true, message: '请输入当前公里数(最多保留两位小数)', trigger: 'blur', pattern: /^\d*\.?(\d|\d{2})$/, }, ]">
									<el-input v-model="redactMaintainCarInfo.intervalkilometre"></el-input>
								</el-form-item>
							</el-col>
							<!-- <el-col :span="12">
								<el-form-item label="下次保养里程(km)" prop="nextKilometre" :rules="[
								{required: true,message: '请输入下次保养里程(最多保留两位小数)',trigger: 'blur',pattern: /^\d*\.?(\d|\d{2})$/,},]">
									<el-input v-model="redactMaintainCarInfo.nextKilometre" maxlength="10"></el-input>
								</el-form-item>
							</el-col> -->
							<el-col :span="12">
								<el-form-item label="保养日期" prop="maintainDate" :rules="[
								{ required: true, message: '请输入保养日期', trigger: 'blur', }, ]">
									<el-date-picker v-model="redactMaintainCarInfo.maintainDate" style="width: 100%"
										format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
									</el-date-picker>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="保养价格(元)" prop="maintainMoney" :rules="[
								{ required: true, message: '请输入保养价格(最多保留两位小数)', trigger: 'blur', pattern: /^\d*\.?(\d|\d{2})$/, }, ]">
									<el-input v-model="redactMaintainCarInfo.maintainMoney" maxlength="10"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="保养地址" prop="maintainAddress" :rules="[
                    			{required: true,message: '请输入保养地址',trigger: 'blur',},]">
									<el-input v-model="redactMaintainCarInfo.maintainAddress"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="保养内容" prop="maintainContent" :rules="[
								{required: true,message: '请输入保养内容',trigger: 'blur',},]">
									<el-input v-model="redactMaintainCarInfo.maintainContent" type="textarea"
										:autosize="true"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button size="small" @click="redactMaintainCarInfoDialog = false">取消</el-button>
						<el-button size="small" @click="confirmMaintainCarRedact()">确定</el-button>
					</div>
				</el-dialog>

				<el-tab-pane label="维修记录">
					<div>
						<el-button size="small" icon="el-icon-circle-plus-outline" type="primary"
							@click="addRepairCar()" :disabled="this.checkId == ''">添加</el-button>
						<el-button size="small" icon="el-icon-delete" type="danger" @click="repairDel()"
							:disabled="this.addRepairCarInfo.car == ''">删除</el-button>
						<el-button size="small" icon="el-icon-circle-close" @click="repairChoose()">取消选择</el-button>
					</div>
					<el-table :data="serviceInformation" :cell-style="cellStyle" :header-cell-class-name="cellHeadStyle"
						style="border: 1px solid #d6cfe2; margin-top: 20px; min-height: 350px; "
						height="calc(100% - 80px)" size="small" @selection-change="handleRepairSelectionChange"
						:row-class-name="tableRowClassName" row-key="id"
						:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" ref="repairTable">
						<el-table-column type="selection" width="55" align="center"></el-table-column>
						<el-table-column prop="operatortime" label="创建时间" show-overflow-tooltip>
							<template slot-scope="scope">
								{{ scope.row.operatortime | formatDateNumber }}
							</template>
						</el-table-column>
						<el-table-column prop="nowkilometre" label="当前里程(km)" show-overflow-tooltip></el-table-column>
						<el-table-column prop="repairdate" label="维修日期" show-overflow-tooltip></el-table-column>
						<el-table-column prop="repairReason" label="维修原因">
							<template slot-scope="scope">
								{{ $dictUtils.getDictLabel("repair_reason", scope.row.repairReason, '-') }}
							</template>
                 		</el-table-column>
						<el-table-column prop="content" label="维修内容" show-overflow-tooltip></el-table-column>
						<el-table-column prop="repairCompany" show-overflow-tooltip label="维修公司"></el-table-column>
						<el-table-column prop="place" label="维修地址" show-overflow-tooltip></el-table-column>
						<el-table-column prop="price" label="维修费用(元)" show-overflow-tooltip></el-table-column>
						<el-table-column prop="operator.name" label="操作人" show-overflow-tooltip></el-table-column>
						<el-table-column prop="operator" label="操作" width="300" show-overflow-tooltip
							align="center">
							<template slot-scope="scope">
								<el-button v-if="scope.row.isrepair!=0" type="text" icon="el-icon-edit" size="mini" @click="redactRepair(scope.row)">编辑</el-button>
								<el-button v-if="scope.row.isrepair!=0" type="text" icon="el-icon-delete" size="mini" @click="redactRepairDel(scope.row.id)">删除</el-button>
								<el-button v-if="scope.row.isrepair==1" type="text" icon="el-icon-check" size="mini" @click="maintenanceRecords1(scope.row.id,'')">维修完成</el-button>
								<el-button v-if="scope.row.isrepair==1" type="text" icon="el-icon-check" size="mini" @click="maintenanceFailureDialogs(scope.row.id)">维修转事故</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination @size-change="handleRepairSizeChange" @current-change="handleRepairCurrentChange"
						:current-page.sync="repair_pageNo" :page-size="repair_pageSize"
						layout="total, prev, pager, next, jumper" :total="repair_total" style="margin: 1rem 0">
					</el-pagination>
				</el-tab-pane>
				<el-dialog title="添加维修记录" width="60%" :visible.sync="insertRepairCarInfoDialog">
					<el-form ref="addRepairCarInfo" :model="addRepairCarInfo" size="small" label-width="110px">
						<el-row>
							<el-col :span="12">
								<el-form-item label="维修日期" prop="repairDate" :rules="[
                    			{required: true,message: '请输入维修日期',trigger: 'blur',},]">
									<el-date-picker v-model="addRepairCarInfo.repairDate" style="width: 100%"
										format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
									</el-date-picker>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="维修地址" prop="repairAddress" :rules="[
                    			{required: true,message: '请输入维修地址',trigger: 'blur',},]">
									<el-input v-model="addRepairCarInfo.repairAddress"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="维修原因" prop="repairReason"
									:rules="[{required: true, message:'维修原因不能为空', trigger:'blur'}]">
									<el-select v-model="addRepairCarInfo.repairReason" placeholder="请选择"  style="width: 100%;">
										<el-option v-for="item in $dictUtils.getDictList('repair_reason')"
											:key="item.value" :label="item.label" :value="item.value">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="维修公司" prop="repairCompany"
										:rules="[{required: true, message:'维修公司不能为空', trigger:'blur'}]">
									<el-input v-model="addRepairCarInfo.repairCompany" placeholder="请填写维修公司"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="维修费用(元)" prop="repairMoney" :rules="[
								{required: true,message: '请输入维修费用(最多保留两位小数)',trigger: 'blur',pattern: /^\d*\.?(\d|\d{2})$/,},]">
									<el-input v-model="addRepairCarInfo.repairMoney" maxlength="10"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="当前里程(km)" prop="nowKilometre" :rules="[
								{required: true,message: '请输入下次保养里程(最多保留两位小数)',trigger: 'blur',pattern: /^\d*\.?(\d|\d{2})$/,},]">
									<el-input v-model="addRepairCarInfo.nowKilometre" maxlength="10"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="维修内容" prop="repairContent" :rules="[
                    			{required: true,message: '请输入维修内容',trigger: 'blur',},]">
									<el-input v-model="addRepairCarInfo.repairContent" type="textarea" :autosize="true">
									</el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button size="small" @click="insertRepairCarInfoDialog = false">取消</el-button>
						<el-button size="small" @click="confirmRepairCarAdd()">确定</el-button>
					</div>
				</el-dialog>
				<el-dialog title="编辑维修记录" width="60%" :visible.sync="redactRepairCarInfoDialog">
					<el-form ref="redactRepairCarInfo" :model="redactRepairCarInfo" size="small" label-width="110px">
						<el-row>
							<el-col :span="12">
								<el-form-item label="维修日期"  prop="repairDate" :rules="[
                    			{required: true,message: '请输入维修日期数', trigger: 'blur',},]">
									<el-date-picker v-model="redactRepairCarInfo.repairDate" style="width: 100%"
										format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
									</el-date-picker>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="维修地址"  prop="repairAddress" :rules="[
                    			{required: true,message: '请输入维修地址',trigger: 'blur',},]">
									<el-input v-model="redactRepairCarInfo.repairAddress"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="维修原因" prop="repairReason"
									:rules="[{required: true, message:'维修原因不能为空', trigger:'blur'}]">
									<el-select v-model="redactRepairCarInfo.repairReason" placeholder="请选择"  style="width: 100%;">
										<el-option v-for="item in $dictUtils.getDictList('repair_reason')"
											:key="item.value" :label="item.label" :value="item.value">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="维修公司" prop="repairCompany"
										:rules="[{required: true, message:'维修公司不能为空', trigger:'blur'}]">
									<el-input v-model="redactRepairCarInfo.repairCompany" placeholder="请填写维修公司"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="维修费用(元)" prop="repairMoney" :rules="[
                    			{required: true,message: '请输入维修费用', trigger: 'blur',pattern: /^\d*\.?(\d|\d{2})$/,},]">
									<el-input v-model="redactRepairCarInfo.repairMoney" maxlength="10"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="当前里程(km)" prop="nowKilometre" :rules="[
                   				 {required: true,message: '请输入当前公里数',trigger: 'blur',pattern: /^\d*\.?(\d|\d{2})$/,},]">
									<el-input v-model="redactRepairCarInfo.nowKilometre" maxlength="10"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="维修内容" prop="repairContent" :rules="[
                   				{ required: true, message: '请输入维修内容',trigger: 'blur',},]">
									<el-input v-model="redactRepairCarInfo.repairContent" type="textarea"
										:autosize="true"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button size="small" @click="redactRepairCarInfoDialog = false">取消</el-button>
						<el-button size="small" @click="confirmRepairCarRedact()">确定</el-button>
					</div>
				</el-dialog>
				<el-tab-pane label="保险记录">
					<div>
						<el-button size="small" icon="el-icon-circle-plus-outline" type="primary"
							@click="addInsuranceCar()" :disabled="this.checkId == ''">添加</el-button>
						<el-button size="small" icon="el-icon-delete" type="danger" @click="insuranceDel()"
							:disabled="this.addInsuranceCarInfo.car == ''">删除</el-button>
						<el-button size="small" icon="el-icon-circle-close" @click="insuranceChoose()">取消选择</el-button>
					</div>
					<el-table :data="insuranceInformation" :cell-style="cellStyles"
						:header-cell-class-name="cellHeadStyle"
						style=" border: 1px solid #d6cfe2; margin-top: 20px; min-height: 350px; "
						height="calc(100% - 80px)" size="small" @selection-change="handleInsuranceSelectionChange"
						:row-class-name="tableRowClassName" row-key="id"
						:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" ref="insuranceTable">
						<el-table-column type="selection" width="55" align="center"></el-table-column>
						<el-table-column prop="operatortime" label="创建时间" show-overflow-tooltip></el-table-column>
						<el-table-column prop="company" show-overflow-tooltip label="保险公司"></el-table-column>
						<el-table-column prop="joindate" label="参保日期" show-overflow-tooltip></el-table-column>
						<el-table-column prop="enddate" label="到期日期" show-overflow-tooltip></el-table-column>
						<el-table-column prop="content" label="保险内容" show-overflow-tooltip></el-table-column>
						<el-table-column prop="price" label="保险费用" show-overflow-tooltip></el-table-column>
						<el-table-column prop="salesman" show-overflow-tooltip label="业务员"></el-table-column>
                		<el-table-column prop="salesphone" show-overflow-tooltip label="业务员电话"></el-table-column>
						<el-table-column prop="policy" show-overflow-tooltip label="电子保单">
							<template slot-scope="scope" v-if="scope.row.policy">
								<a :href="item" target="_blank" :key="index" v-for="(item, index) in scope.row.policy.split('|')">
									{{decodeURIComponent(item.substring(item.lastIndexOf("/")+1))}}
								</a>
							</template>
						</el-table-column>
						<el-table-column prop="operator.name" label="操作人" show-overflow-tooltip></el-table-column>
						<el-table-column label="操作" width="220" show-overflow-tooltip align="center">
							<template slot-scope="scope">
								<el-button type="text" size="mini" icon="el-icon-edit"
									@click="redactInsurance(scope.row)">编辑
								</el-button>
								<el-button type="text" size="mini" icon="el-icon-delete"
									@click="redactInsuranceDel(scope.row.id)">删除
								</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination @size-change="handleInsuranceSizeChange"
						@current-change="handleInsuranceCurrentChange" :current-page.sync="insurance_pageNo"
						:page-size="insurance_pageSize" layout="total, prev, pager, next, jumper"
						:total="insurance_total" style="margin: 1rem 0">
					</el-pagination>
				</el-tab-pane>
				<el-dialog title="添加保险记录" width="60%" :visible.sync="insertInsuranceCarInfoDialog">
					<el-form ref="addInsuranceCarInfo" :model="addInsuranceCarInfo" size="small" label-width="110px">
						<el-row>
							<el-col :span="12">
								<el-form-item label="保险公司" prop="company"
									:rules="[{required: true, message:'保险公司不能为空', trigger:'blur'}]">
									<el-input v-model="addInsuranceCarInfo.company" placeholder="请填写保险公司"     ></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="参保日期"  prop="insuranceDate" :rules="[
                    			{required: true,message: '请输入参保日期',trigger: 'blur',},]">
									<el-date-picker v-model="addInsuranceCarInfo.insuranceDate" style="width: 100%"
										format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
									</el-date-picker>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="到期日期" prop="expirationDate" :rules="[
                    			{required: true,message: '请输入到期日期',trigger: 'blur',},]">
									<el-date-picker v-model="addInsuranceCarInfo.expirationDate" style="width: 100%"
										format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
									</el-date-picker>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="保险内容"  prop="insuranceContent" :rules="[
                    			{required: true,message: '请输入保险内容',trigger: 'blur',},]">
									<el-input v-model="addInsuranceCarInfo.insuranceContent" type="text"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="保险费用" prop="price" :rules="[
                    			{required: true,message: '请输入保险费用(最多保留两位小数)',trigger: 'blur',pattern: /^\d*\.?(\d|\d{2})$/,},]">
									<el-input v-model="addInsuranceCarInfo.price" maxlength="10"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="业务员" prop="salesman"
									:rules="[{required: true, message:'业务员不能为空', trigger:'blur'}]">
								<el-input v-model="addInsuranceCarInfo.salesman" placeholder="请填写业务员"></el-input>
							</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="业务员电话" prop="salesphone"
									:rules="[{required: true, message:'业务员电话不能为空', trigger:'blur'}]">
								<el-input v-model="addInsuranceCarInfo.salesphone" placeholder="请填写业务员电话"></el-input>
							</el-form-item>
							</el-col>
							<el-col>
								<el-form-item label="电子保单" prop="policy"
									:rules="[{required: true, message:'电子保单不能为空', trigger:'blur'}]">
								<el-upload ref="policy"
										:action="`${this.$http.BASE_URL}/sys/file/webupload/upload?uploadPath=/dlyrl.oa.carinfo/oaCarinfoInsuranceLog`"
										:headers="{token: $cookie.get('token')}"
										:on-preview="(file, fileList) => {$window.location.href = (file.response && file.response.url) || file.url}"
										:on-success="(response, file, fileList) => {
										addInsuranceCarInfo.policy = fileList.map(item => (item.response && item.response.url) || item.url).join('|')
										}"
										:on-remove="(file, fileList) => {
										$http.post(`/sys/file/webupload/deleteByUrl?url=${(file.response && file.response.url) || file.url}`).then(({data}) => {
											$message.success(data.msg)
										})
										addInsuranceCarInfo.policy = fileList.map(item => item.url).join('|')
										}"
										:before-remove="(file, fileList) => {
										return $confirm(`确定移除 ${file.name}？`)
										}"
										multiple
										:limit="5"
										:on-exceed="(files, fileList) =>{
										$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
										}"
										:file-list="policyArra">
										<el-button size="small" type="primary">点击上传</el-button>
										<div slot="tip" class="el-upload__tip">添加相关附件</div>
									</el-upload>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button size="small" @click="insertInsuranceCarInfoDialog = false">取消</el-button>
						<el-button size="small" @click="confirmInsuranceCarAdd()">确定</el-button>
					</div>
				</el-dialog>
				<el-dialog title="编辑保险记录" width="60%" :visible.sync="redactInsuranceCarInfoDialog">
					<el-form ref="redactInsuranceCarInfo" :model="redactInsuranceCarInfo" size="small" label-width="110px" >
						<el-row>
							<el-col :span="12">
								<el-form-item label="保险公司" prop="company"
									:rules="[{required: true, message:'保险公司不能为空', trigger:'blur'}]">
									<el-input v-model="redactInsuranceCarInfo.company" placeholder="请填写保险公司"     ></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="参保日期" prop="insuranceDate" :rules="[
                    			{required: true,message: '请输入参保日期',trigger: 'blur',},]">
									<el-date-picker v-model="redactInsuranceCarInfo.insuranceDate" style="width: 100%"
										format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
									</el-date-picker>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="到期日期" prop="expirationDate" :rules="[
                    			{required: true,message: '请输入到期日期',trigger: 'blur',},]">
									<el-date-picker v-model="redactInsuranceCarInfo.expirationDate" style="width: 100%"
										format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
									</el-date-picker>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="保险内容" prop="name" :rules="[
                    			{required: true, message: '请输入保险内容',trigger: 'blur',},]">
									<el-input v-model="redactInsuranceCarInfo.insuranceContent"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="保险费用" prop="price" :rules="[
                    			{required: true,message: '请输入保险费用(最多保留两位小数)',trigger: 'blur',pattern: /^\d*\.?(\d|\d{2})$/,},]">
									<el-input v-model="redactInsuranceCarInfo.price" maxlength="10"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="业务员" prop="salesman"
									:rules="[{required: true, message:'业务员不能为空', trigger:'blur'}]">
								<el-input v-model="redactInsuranceCarInfo.salesman" placeholder="请填写业务员"></el-input>
							</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="业务员电话" prop="salesphone"
									:rules="[{required: true, message:'业务员电话不能为空', trigger:'blur'}]">
								<el-input v-model="redactInsuranceCarInfo.salesphone" placeholder="请填写业务员电话"></el-input>
							</el-form-item>
							</el-col>
							<el-col>
								<el-form-item label="电子保单" prop="policy"
									:rules="[{required: true, message:'电子保单不能为空', trigger:'blur'}]">
									<el-upload ref="policy"
										:action="`${this.$http.BASE_URL}/sys/file/webupload/upload?uploadPath=/dlyrl.oa.carinfo/oaCarinfoInsuranceLog`"
										:headers="{token: $cookie.get('token')}"
										:on-preview="(file, fileList) => {$window.location.href = (file.response && file.response.url) || file.url}"
										:on-success="(response, file, fileList) => {
										redactInsuranceCarInfo.policy = fileList.map(item => (item.response && item.response.url) || item.url).join('|')
										}"
										:on-remove="(file, fileList) => {
										$http.post(`/sys/file/webupload/deleteByUrl?url=${(file.response && file.response.url) || file.url}`).then(({data}) => {
											$message.success(data.msg)
										})
										redactInsuranceCarInfo.policy = fileList.map(item => item.url).join('|')
										}"
										:before-remove="(file, fileList) => {
										return $confirm(`确定移除 ${file.name}？`)
										}"
										multiple
										:limit="5"
										:on-exceed="(files, fileList) =>{
										$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
										}"
										:file-list="policyArra">
										<el-button size="small" type="primary">点击上传</el-button>
										<div slot="tip" class="el-upload__tip">添加相关附件</div>
									</el-upload>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button size="small" @click="redactInsuranceCarInfoDialog = false">取消</el-button>
						<el-button size="small" @click="confirmInsuranceCarRedact()">确定</el-button>
					</div>
				</el-dialog>

				<el-tab-pane label="年检记录">
					<div>
						<el-button size="small" icon="el-icon-circle-plus-outline" type="primary"
							@click="addInspectCar()" :disabled="this.checkId == ''">添加</el-button>
						<el-button size="small" icon="el-icon-delete" type="danger" @click="inspectDel()"
							:disabled="this.addInspectCarInfo.car == ''">删除</el-button>
						<el-button size="small" icon="el-icon-circle-close" @click="inspectChoose()">取消选择</el-button>
					</div>
					<el-table :data="annualInspectionInformation" :cell-style="cellStyles"
						:header-cell-class-name="cellHeadStyle"
						style=" border: 1px solid #d6cfe2; margin-top: 20px; min-height: 350px; "
						height="calc(100% - 80px)" size="small" @selection-change="handleInspectSelectionChange"
						:row-class-name="tableRowClassName" row-key="id"
						:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" ref="inspectTable">
						<el-table-column type="selection" width="55" align="center"></el-table-column>
						<el-table-column prop="operatortime" label="创建时间" show-overflow-tooltip>
							<template slot-scope="scope">
								{{ scope.row.operatortime | formatDateNumber }}
							</template>
						</el-table-column>
						<el-table-column prop="checkdate" show-overflow-tooltip label="年检日期"></el-table-column>
						<el-table-column prop="cotent" show-overflow-tooltip label="年检内容"></el-table-column>
						<el-table-column prop="nextDate" show-overflow-tooltip label="下次年检日期"></el-table-column>
						<el-table-column prop="drivingLicense" show-overflow-tooltip label="行驶证照片">
							<template slot-scope="scope" v-if="scope.row.drivingLicense">
								<el-image style="height: 50px;width:50px;margin-right:10px;" :src="src"
									v-for="(src, index) in scope.row.drivingLicense.split('|')" :key="index"
									:preview-src-list="scope.row.drivingLicense.split('|')">
								</el-image>
							</template>
						</el-table-column>
						<el-table-column prop="inspection" show-overflow-tooltip label="年检标">
							<template slot-scope="scope" v-if="scope.row.inspection">
								<a :href="item" target="_blank" :key="index" v-for="(item, index) in scope.row.inspection.split('|')">
									{{decodeURIComponent(item.substring(item.lastIndexOf("/")+1))}}
								</a>
							</template>
						</el-table-column>
						<el-table-column prop="company" show-overflow-tooltip label="年检公司"></el-table-column>
						<el-table-column prop="area" show-overflow-tooltip label="年检地点"></el-table-column>
						<el-table-column prop="operator.name" label="操作人"></el-table-column>
						<el-table-column prop="operator" label="操作" width="220" show-overflow-tooltip align="center">
							<template slot-scope="scope">
								<el-button type="text" icon="el-icon-edit" size="mini"
									@click="redactInspect(scope.row)">编辑
								</el-button>
								<el-button type="text" icon="el-icon-delete" size="mini"
									@click="redactInspectDel(scope.row.id)">删除
								</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination @size-change="handleInspectSizeChange" @current-change="handleInspectCurrentChange"
						:current-page.sync="inspect_pageNo" :page-size="inspect_pageSize"
						layout="total, prev, pager, next, jumper" :total="inspect_total" style="margin: 1rem 0">
					</el-pagination>
				</el-tab-pane>
				<el-dialog title="添加年检记录" width="60%" :visible.sync="insertInspectCarInfoDialog">
					<el-form ref="addInspectCarInfo" :model="addInspectCarInfo" size="small" label-width="120px">
						<el-row :gutter="15">
							<el-col :span="12">
								<el-form-item label="年检日期" prop="checkdate" :rules="[ {required: true, message:'年检日期不能为空', trigger:'blur'} ]">
									<el-date-picker v-model="addInspectCarInfo.checkdate" type="datetime"
										style="width: 100%;" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
									</el-date-picker>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="年检内容" prop="cotent" :rules="[ {required: true, message:'年检内容不能为空', trigger:'blur'} ]">
									<el-input v-model="addInspectCarInfo.cotent" placeholder="请填写年检内容">
									</el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="下次年检日期" prop="nextDate" :rules="[ {required: true, message:'下次年检日期不能为空', trigger:'blur'} ]">
									<el-date-picker v-model="addInspectCarInfo.nextDate" type="datetime"
										style="width: 100%;" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
									</el-date-picker>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="检测公司" prop="company"
									:rules="[{required: true, message:'检测公司不能为空', trigger:'blur'}]">
								<el-input v-model="addInspectCarInfo.company" placeholder="请填写检测公司"></el-input>
							</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="地点" prop="area"
										:rules="[{required: true, message:'地点不能为空', trigger:'blur'}]">
									<el-input v-model="addInspectCarInfo.area" placeholder="请填写地点"></el-input>
									</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="操作人" prop="operator.id" :rules="[ {required: true, message:'操作人不能为空', trigger:'blur'} ]">
									<user-select :limit='1' :value="addInspectCarInfo.operator.id"
										@getValue='(value, label) => {addInspectCarInfo.operator.id=value, addInspectCarInfo.operator.name=label}'>
									</user-select>
								</el-form-item>
							</el-col>
							<el-col :span="24">
								<el-form-item label="年检标" prop="inspection"
									:rules="[
									{required: true, message:'年检标不能为空', trigger:'blur'}
									]">
								<el-upload ref="inspection"
										:action="`${this.$http.BASE_URL}/sys/file/webupload/upload?uploadPath=/dlyrl.oa.carinfo/oaCarinfoYearcheckLog`"
										:headers="{token: $cookie.get('token')}"
										:on-preview="(file, fileList) => {$window.location.href = (file.response && file.response.url) || file.url}"
										:on-success="(response, file, fileList) => {
										addInspectCarInfo.inspection = fileList.map(item => (item.response && item.response.url) || item.url).join('|')
										}"
										:on-remove="(file, fileList) => {
										$http.post(`/sys/file/webupload/deleteByUrl?url=${(file.response && file.response.url) || file.url}`).then(({data}) => {
											$message.success(data.msg)
										})
										addInspectCarInfo.inspection = fileList.map(item => item.url).join('|')
										}"
										:before-remove="(file, fileList) => {
										return $confirm(`确定移除 ${file.name}？`)
										}"
										multiple
										:limit="5"
										:on-exceed="(files, fileList) =>{
										$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
										}"
										:file-list="inspectionArra">
										<el-button size="small" type="primary">点击上传</el-button>
										<div slot="tip" class="el-upload__tip">添加相关附件</div>
									</el-upload>
							</el-form-item>
							</el-col>
							<el-col :span="24">
								<el-form-item label="行驶证照片" prop="drivingLicense" :rules="[ {required: true, message:'行驶证照片不能为空', trigger:'blur'} ]">
									<el-upload ref="drivingLicense" list-type="picture-card"
										:action="`${this.$http.BASE_URL}/sys/file/webupload/upload?uploadPath=/dlyrl/oa/carinfo/oaCarinfoYearcheckLog`"
										:headers="{token: $cookie.get('token')}" :on-preview="(file, fileList) => {
					                        $alert(`<img style='width:100%' src=' ${(file.response && file.response.url) || file.url}'/>`,  {
					                          dangerouslyUseHTMLString: true,
					                          showConfirmButton: false,
					                          closeOnClickModal: true,
					                          customClass: 'showPic'
					                        });
					                    }" :on-success="(response, file, fileList) => {
					                       addInspectCarInfo.drivingLicense = fileList.map(item => (item.response && item.response.url) || item.url).join('|')
					                    }" :on-remove="(file, fileList) => {
					                      $http.post(`/sys/file/webupload/deleteByUrl?url=${(file.response && file.response.url) || file.url}`).then(({data}) => {
					                        $message.success(data.msg)
					                      })
					                      addInspectCarInfo.drivingLicense = fileList.map(item => item.url).join('|')
					                    }" :before-remove="(file, fileList) => {
					                      return $confirm(`确定移除 ${file.name}？`)
					                    }" multiple :limit="5" :on-exceed="(files, fileList) =>{
					                      $message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
					                    }" :file-list="drivingLicenseArra">
										<i class="el-icon-plus"></i>
									</el-upload>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button size="small" @click="insertInspectCarInfoDialog = false">取消</el-button>
						<el-button size="small" @click="confirmInspectCarAdd()">确定</el-button>
					</div>
				</el-dialog>
				<el-dialog title="编辑年检记录" width="60%" :visible.sync="redactInspectCarInfoDialog">
					<el-form ref="redactInspectCarInfo" :model="redactInspectCarInfo" size="small"  label-width="120px">
						<el-row :gutter="15">
							<el-col :span="12">
								<el-form-item label="年检日期" prop="checkdate" :rules="[ {required: true, message:'年检日期不能为空', trigger:'blur'} ]">
									<el-date-picker v-model="redactInspectCarInfo.checkdate" type="datetime"
										style="width: 100%;" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
									</el-date-picker>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="年检内容" prop="cotent" :rules="[ {required: true, message:'年检内容不能为空', trigger:'blur'} ]">
									<el-input  v-model="redactInspectCarInfo.cotent" placeholder="请填写年检内容">
									</el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="下次年检日期" prop="nextDate" :rules="[ {required: true, message:'下次年检日期不能为空', trigger:'blur'} ]">
									<el-date-picker v-model="redactInspectCarInfo.nextDate" type="datetime"
										style="width: 100%;" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
									</el-date-picker>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="检测公司" prop="company"
									:rules="[{required: true, message:'检测公司不能为空', trigger:'blur'}]">
								<el-input v-model="redactInspectCarInfo.company" placeholder="请填写检测公司"></el-input>
							</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="地点" prop="area"
										:rules="[{required: true, message:'地点不能为空', trigger:'blur'}]">
									<el-input v-model="redactInspectCarInfo.area" placeholder="请填写地点"></el-input>
									</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="操作人" prop="operator.id" :rules="[ {required: true, message:'操作人不能为空', trigger:'blur'} ]">
									<user-select :limit='1' :value="redactInspectCarInfo.operator.id"
										@getValue='(value, label) => {redactInspectCarInfo.operator.id=value, redactInspectCarInfo.operator.name=label}'>
									</user-select>
								</el-form-item>
							</el-col>
							<el-col :span="24">
								<el-form-item label="年检标" prop="inspection"
									:rules="[
									{required: true, message:'年检标不能为空', trigger:'blur'}
									]">
								<el-upload ref="inspection"
										:action="`${this.$http.BASE_URL}/sys/file/webupload/upload?uploadPath=/dlyrl.oa.carinfo/oaCarinfoYearcheckLog`"
										:headers="{token: $cookie.get('token')}"
										:on-preview="(file, fileList) => {$window.location.href = (file.response && file.response.url) || file.url}"
										:on-success="(response, file, fileList) => {
										redactInspectCarInfo.inspection = fileList.map(item => (item.response && item.response.url) || item.url).join('|')
										}"
										:on-remove="(file, fileList) => {
										$http.post(`/sys/file/webupload/deleteByUrl?url=${(file.response && file.response.url) || file.url}`).then(({data}) => {
											$message.success(data.msg)
										})
										redactInspectCarInfo.inspection = fileList.map(item => item.url).join('|')
										}"
										:before-remove="(file, fileList) => {
										return $confirm(`确定移除 ${file.name}？`)
										}"
										multiple
										:limit="5"
										:on-exceed="(files, fileList) =>{
										$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
										}"
										:file-list="inspectionArra">
										<el-button size="small" type="primary">点击上传</el-button>
										<div slot="tip" class="el-upload__tip">添加相关附件</div>
									</el-upload>
							</el-form-item>
							</el-col>
							<el-col :span="24">
								<el-form-item label="行驶证照片" prop="drivingLicense" :rules="[ {required: true, message:'行驶证照片不能为空', trigger:'blur'} ]">
									<el-upload ref="drivingLicense" list-type="picture-card"
										:action="`${this.$http.BASE_URL}/sys/file/webupload/upload?uploadPath=/dlyrl/oa/carinfo/oaCarinfoYearcheckLog`"
										:headers="{token: $cookie.get('token')}" :on-preview="(file, fileList) => {
						                    $alert(`<img style='width:100%' src=' ${(file.response && file.response.url) || file.url}'/>`,  {
						                      dangerouslyUseHTMLString: true,
						                      showConfirmButton: false,
						                      closeOnClickModal: true,
						                      customClass: 'showPic'
						                    });
						                }" :on-success="(response, file, fileList) => {
						                   redactInspectCarInfo.drivingLicense = fileList.map(item => (item.response && item.response.url) || item.url).join('|')
						                }" :on-remove="(file, fileList) => {
						                  $http.post(`/sys/file/webupload/deleteByUrl?url=${(file.response && file.response.url) || file.url}`).then(({data}) => {
						                    $message.success(data.msg)
						                  })
						                  redactInspectCarInfo.drivingLicense = fileList.map(item => item.url).join('|')
						                }" :before-remove="(file, fileList) => {
						                  return $confirm(`确定移除 ${file.name}？`)
						                }" multiple :limit="5" :on-exceed="(files, fileList) =>{
						                  $message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
						                }" :file-list="drivingLicenseArra">
										<i class="el-icon-plus"></i>
									</el-upload>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button size="small" @click="redactInspectCarInfoDialog = false">取消</el-button>
						<el-button size="small" @click="confirmInspectCarRedact()">确定</el-button>
					</div>
				</el-dialog>

				<el-tab-pane label="事故记录">
					<div>
						<el-button size="small" icon="el-icon-circle-plus-outline" type="primary"
							@click="addAccidentCar()" :disabled="this.checkId == ''">添加</el-button>
						<el-button size="small" icon="el-icon-delete" type="danger" @click="accidentDel()"
							:disabled="this.addAccidentCarInfo.car == ''">删除</el-button>
						<el-button size="small" icon="el-icon-circle-close" @click="accidentChoose()">取消选择</el-button>
					</div>
					<el-table :data="accidentInformation" :cell-style="cellStyle"
						:header-cell-class-name="cellHeadStyle"
						style=" border: 1px solid #d6cfe2; margin-top: 20px; min-height: 350px; "
						height="calc(100% - 80px)" size="small" @selection-change="handleAccidentSelectionChange"
						:row-class-name="tableRowClassName" row-key="id"
						:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" ref="accidentTable">
						<el-table-column type="selection" width="55" align="center"></el-table-column>
						<el-table-column prop="operatortime" label="创建时间" show-overflow-tooltip>
							<template slot-scope="scope">
								{{ scope.row.operatortime | formatDateNumber }}
							</template>
						</el-table-column>
						<el-table-column prop="accidentdate" label="事故时间" show-overflow-tooltip></el-table-column>
						<el-table-column prop="content" label="事故原因" show-overflow-tooltip></el-table-column>
						<el-table-column prop="place" label="事故地点" show-overflow-tooltip></el-table-column>
						<el-table-column prop="driver" show-overflow-tooltip label="驾驶人"></el-table-column>
						<el-table-column prop="liability" show-overflow-tooltip label="责任划分(%)"></el-table-column>
						<el-table-column prop="accpicture" show-overflow-tooltip label="事故照片">
							<template slot-scope="scope" v-if="scope.row.accpicture">
								<el-image style="height: 50px;width:50px;margin-right:10px;" :src="src"
									v-for="(src, index) in scope.row.accpicture.split('|')" :key="index"
									:preview-src-list="scope.row.accpicture.split('|')">
								</el-image>
							</template>
						</el-table-column>
						<el-table-column prop="operator.name" label="操作人" show-overflow-tooltip></el-table-column>
						<el-table-column prop="operator" label="操作" width="300" show-overflow-tooltip align="center">
							<template slot-scope="scope">
								<el-button v-if="scope.row.isaccident!=0" type="text" icon="el-icon-edit" size="mini" @click="redactAccident(scope.row)">编辑</el-button>
								<el-button v-if="scope.row.isaccident!=0" type="text" icon="el-icon-delete" size="mini" @click="redactAccidentDel(scope.row.id)">删除</el-button>
								<el-button v-if="scope.row.isaccident==1"  type="text" icon="el-icon-check" size="mini" @click="maintenanceRecords('',scope.row.id)">恢复正常</el-button>
								<el-button v-if="scope.row.isaccident!=0" type="text" icon="el-icon-check" size="mini" @click="AtoMaintenanceInfoDialogs(scope.row.id)">事故转维修</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination @size-change="handleAccidentSizeChange" @current-change="handleAccidentCurrentChange"
						:current-page.sync="accident_pageNo" :page-size="accident_pageSize"
						layout="total, prev, pager, next, jumper" :total="accident_total" style="margin: 1rem 0">
					</el-pagination>
				</el-tab-pane>
				<el-dialog title="添加事故记录" width="60%" :visible.sync="insertAccidentCarInfoDialog">
					<el-form ref="addAccidentCarInfo" :model="addAccidentCarInfo" size="small" label-width="110px">
						<el-row>
							<el-col :span="12">
								<el-form-item label="事故时间" prop="accidentdate" :rules="[
                    			{required: true, message: '请输入事故时间',trigger: 'blur',},]">
									<el-date-picker v-model="addAccidentCarInfo.accidentdate" style="width: 100%"
										format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
									</el-date-picker>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="事故地点" prop="place" :rules="[
                    			{required: true,message: '请输入事故地点',trigger: 'blur',},]">
									<el-input v-model="addAccidentCarInfo.place">
									</el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="事故内容" prop="content" :rules="[
                    			{required: true,message: '请输入事故内容',trigger: 'blur',},]">
									<el-input v-model="addAccidentCarInfo.content">
									</el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="驾驶人" prop="driver"
									:rules="[{required: true, message:'驾驶人不能为空', trigger:'blur'}]">
								<el-input v-model="addAccidentCarInfo.driver" placeholder="请填写驾驶人"></el-input>
							</el-form-item>
							</el-col>
							<el-col :span="24">
								<el-form-item label="责任划分(%)" prop="liability"
									:rules="[{required: true, message:'责任划分(%)不能为空', trigger:'blur'}]">
								<el-input v-model="addAccidentCarInfo.liability" placeholder="请填写责任划分(%)"></el-input>
							</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="事故照片" prop="accpicture" :rules="[ {required: true, message:'事故照片不能为空', trigger:'blur'} ]">
									<el-upload ref="accpicture" list-type="picture-card"
										:action="`${this.$http.BASE_URL}/sys/file/webupload/upload?uploadPath=/dlyrl/oa/carinfo/oaCarinfoYearcheckLog`"
										:headers="{token: $cookie.get('token')}" :on-preview="(file, fileList) => {
						                    $alert(`<img style='width:100%' src=' ${(file.response && file.response.url) || file.url}'/>`,  {
						                      dangerouslyUseHTMLString: true,
						                      showConfirmButton: false,
						                      closeOnClickModal: true,
						                      customClass: 'showPic'
						                    });
						                }" :on-success="(response, file, fileList) => {
						                   addAccidentCarInfo.accpicture = fileList.map(item => (item.response && item.response.url) || item.url).join('|')
						                }" :on-remove="(file, fileList) => {
						                  $http.post(`/sys/file/webupload/deleteByUrl?url=${(file.response && file.response.url) || file.url}`).then(({data}) => {
						                    $message.success(data.msg)
						                  })
						                  addAccidentCarInfo.accpicture = fileList.map(item => item.url).join('|')
						                }" :before-remove="(file, fileList) => {
						                  return $confirm(`确定移除 ${file.name}？`)
						                }" multiple :limit="5" :on-exceed="(files, fileList) =>{
						                  $message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
						                }" :file-list="accpictureList">
										<i class="el-icon-plus"></i>
									</el-upload>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button size="small" @click="insertAccidentCarInfoDialog = false">取消</el-button>
						<el-button size="small" @click="confirmAccidentCarAdd()">确定</el-button>
					</div>
				</el-dialog>
				<el-dialog title="编辑事故记录" width="60%" :visible.sync="redactAccidentCarInfoDialog">
					<el-form ref="redactAccidentCarInfo" :model="redactAccidentCarInfo" size="small" label-width="110px">
						<el-row>
							<el-col :span="12">
								<el-form-item label="事故时间" prop="accidentdate" :rules="[
                    			{required: true,message: '请输入事故时间',trigger: 'blur',},]">
									<el-date-picker v-model="redactAccidentCarInfo.accidentdate" style="width: 100%"
										format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
									</el-date-picker>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="事故地点" prop="place" :rules="[
                    			{required: true,message: '请输入事故地点',trigger: 'blur',},]">
									<el-input v-model="redactAccidentCarInfo.place">
									</el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="事故内容" prop="content" :rules="[
                    			{required: true,message: '请输入事故内容',trigger: 'blur',},]">
									<el-input v-model="redactAccidentCarInfo.content">
									</el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="驾驶人" prop="driver"
									:rules="[{required: true, message:'驾驶人不能为空', trigger:'blur'}]">
								<el-input v-model="redactAccidentCarInfo.driver" placeholder="请填写驾驶人"></el-input>
							</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="责任划分(%)" prop="liability"
									:rules="[{required: true, message:'责任划分(%)不能为空', trigger:'blur'}]">
								<el-input v-model="redactAccidentCarInfo.liability" placeholder="请填写责任划分(%)"></el-input>
							</el-form-item>
							</el-col>
							<el-col :span="24">
							<el-form-item label="事故照片" prop="accpicture" :rules="[ {required: true, message:'事故照片不能为空', trigger:'blur'} ]">
									<el-upload ref="accpicture" list-type="picture-card"
										:action="`${this.$http.BASE_URL}/sys/file/webupload/upload?uploadPath=/dlyrl/oa/carinfo/oaCarinfoYearcheckLog`"
										:headers="{token: $cookie.get('token')}" :on-preview="(file, fileList) => {
						                    $alert(`<img style='width:100%' src=' ${(file.response && file.response.url) || file.url}'/>`,  {
						                      dangerouslyUseHTMLString: true,
						                      showConfirmButton: false,
						                      closeOnClickModal: true,
						                      customClass: 'showPic'
						                    });
						                }" :on-success="(response, file, fileList) => {
						                   redactAccidentCarInfo.accpicture = fileList.map(item => (item.response && item.response.url) || item.url).join('|')
						                }" :on-remove="(file, fileList) => {
						                  $http.post(`/sys/file/webupload/deleteByUrl?url=${(file.response && file.response.url) || file.url}`).then(({data}) => {
						                    $message.success(data.msg)
						                  })
						                  redactAccidentCarInfo.accpicture = fileList.map(item => item.url).join('|')
						                }" :before-remove="(file, fileList) => {
						                  return $confirm(`确定移除 ${file.name}？`)
						                }" multiple :limit="5" :on-exceed="(files, fileList) =>{
						                  $message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
						                }" :file-list="accpictureList">
										<i class="el-icon-plus"></i>
									</el-upload>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button size="small" @click="redactAccidentCarInfoDialog = false">取消</el-button>
						<el-button size="small" @click="confirmAccidentCarRedact()">确定</el-button>
					</div>
				</el-dialog>
				<el-dialog title="事故转维修" width="60%" :visible.sync="AtoMaintenanceInfoDialog">
					<el-form ref="AtoMaintenanceInfo" :model="AtoMaintenanceInfo" size="small" label-width="110px">
						<el-row>
							<el-col :span="12">
								<el-form-item label="维修日期" prop="repairdate" :rules="[
                    			{required: true,message: '请输入维修日期',trigger: 'blur',},]">
									<el-date-picker v-model="AtoMaintenanceInfo.repairdate" style="width: 100%"
										format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
									</el-date-picker>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="维修地址" prop="place" :rules="[
                    			{required: true,message: '请输入维修地址',trigger: 'blur',},]">
									<el-input v-model="AtoMaintenanceInfo.place"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="维修原因" prop="repairReason"
									:rules="[{required: true, message:'维修原因不能为空', trigger:'blur'}]">
									<el-select v-model="AtoMaintenanceInfo.repairReason" placeholder="请选择"  style="width: 100%;">
										<el-option v-for="item in $dictUtils.getDictList('repair_reason')"
											:key="item.value" :label="item.label" :value="item.value">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="维修公司" prop="repairCompany"
										:rules="[{required: true, message:'维修公司不能为空', trigger:'blur'}]">
									<el-input v-model="AtoMaintenanceInfo.repairCompany" placeholder="请填写维修公司"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="维修费用(元)" prop="nowkilometre" :rules="[
								{required: true,message: '请输入维修费用(最多保留两位小数)',trigger: 'blur',pattern: /^\d*\.?(\d|\d{2})$/,},]">
									<el-input v-model="AtoMaintenanceInfo.nowkilometre" maxlength="10"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="当前里程(km)" prop="nowKilometre" :rules="[
								{required: true,message: '请输入下次保养里程(最多保留两位小数)',trigger: 'blur',pattern: /^\d*\.?(\d|\d{2})$/,},]">
									<el-input v-model="AtoMaintenanceInfo.nowKilometre" maxlength="10"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="维修内容" prop="content" :rules="[
                    			{required: true,message: '请输入维修内容',trigger: 'blur',},]">
									<el-input v-model="AtoMaintenanceInfo.content" type="textarea" :autosize="true">
									</el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button size="small" @click="AtoMaintenanceInfoDialog = false">取消</el-button>
						<el-button size="small" @click="AtoMaintenanceInfos()">确定</el-button>
					</div>
				</el-dialog>
				<el-dialog title="维修转事故" width="60%" :visible.sync="maintenanceFailureDialog">
					<el-form ref="maintenanceFailureInfo" :model="maintenanceFailureInfo" size="small" label-width="110px">
						<el-row>
							<el-col :span="12">
								<el-form-item label="事故时间" prop="accidentdate" :rules="[
                    			{required: true, message: '请输入事故时间',trigger: 'blur',},]">
									<el-date-picker v-model="maintenanceFailureInfo.accidentdate" style="width: 100%"
										format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
									</el-date-picker>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="事故地点" prop="place" :rules="[
                    			{required: true,message: '请输入事故地点',trigger: 'blur',},]">
									<el-input v-model="maintenanceFailureInfo.place">
									</el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="事故内容" prop="content" :rules="[
                    			{required: true,message: '请输入事故内容',trigger: 'blur',},]">
									<el-input v-model="maintenanceFailureInfo.content">
									</el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="驾驶人" prop="driver"
									:rules="[{required: true, message:'驾驶人不能为空', trigger:'blur'}]">
								<el-input v-model="maintenanceFailureInfo.driver" placeholder="请填写驾驶人"></el-input>
							</el-form-item>
							</el-col>
							<el-col :span="24">
								<el-form-item label="责任划分(%)" prop="liability"
									:rules="[{required: true, message:'责任划分(%)不能为空', trigger:'blur'}]">
								<el-input v-model="maintenanceFailureInfo.liability" placeholder="请填写责任划分(%)"></el-input>
							</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="事故照片" prop="accpicture" :rules="[ {required: true, message:'事故照片不能为空', trigger:'blur'} ]">
									<el-upload ref="accpicture" list-type="picture-card"
										:action="`${this.$http.BASE_URL}/sys/file/webupload/upload?uploadPath=/dlyrl/oa/carinfo/oaCarinfoYearcheckLog`"
										:headers="{token: $cookie.get('token')}" :on-preview="(file, fileList) => {
						                    $alert(`<img style='width:100%' src=' ${(file.response && file.response.url) || file.url}'/>`,  {
						                      dangerouslyUseHTMLString: true,
						                      showConfirmButton: false,
						                      closeOnClickModal: true,
						                      customClass: 'showPic'
						                    });
						                }" :on-success="(response, file, fileList) => {
						                   maintenanceFailureInfo.accpicture = fileList.map(item => (item.response && item.response.url) || item.url).join('|')
						                }" :on-remove="(file, fileList) => {
						                  $http.post(`/sys/file/webupload/deleteByUrl?url=${(file.response && file.response.url) || file.url}`).then(({data}) => {
						                    $message.success(data.msg)
						                  })
						                  maintenanceFailureInfo.accpicture = fileList.map(item => item.url).join('|')
						                }" :before-remove="(file, fileList) => {
						                  return $confirm(`确定移除 ${file.name}？`)
						                }" multiple :limit="5" :on-exceed="(files, fileList) =>{
						                  $message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
						                }" :file-list="accpictureLists">
										<i class="el-icon-plus"></i>
									</el-upload>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button size="small" @click="maintenanceFailureDialog = false">取消</el-button>
						<el-button size="small" @click="maintenanceFailureInfos()">确定</el-button>
					</div>
				</el-dialog>
			</el-tabs>
		</div>
	</div>
</template>
<script>
	import tableStyles from "../../../../../utils/mixins.js";
	import UserSelect from '@/components/userSelect'
	import {
		colorSpan
	} from "../../../sys/dashboard/echarts/default.js";
	export default {
		mixins: [tableStyles],
		data() {
			return {
				//车的ID
				checkId: "",
				//顶部搜索
				carInfoSearch: {
					carNumber: "",
					brand: "",
					carframeno: "",
					engineno: "",
					seatNumber:"",
					carstatus:"",
				},
				// loading加载
				carInfoLoading: null,

				//批量删除
				checkCarNum: [],

				//添加车辆信息
				addCarInfoDialog: false,
				//添加车辆基本信息dialog
				addCarInfo: {
					carno: '', // 车牌号
					brand: '', // 品牌
					cartype: '', // 车型
					productdate: '', // 生产日期
					carframeno: '', // 车架号
					engineno: '', // 发动机号
					carstatus: '', // 车辆状态
					licence: '', // 行车证
					registeredDate: '', //注册日期
					licencepic: '', // 行车证照片
					seatNumber: '', //座位数
					usepProperty:'',//使用性质
					isnewcar:'',//是否新能源汽车
					carOwner:'',//车辆所有人
					administrator: {
						id: ''
					},
					mileage: '' //车辆里程(KM)
				},
				//修改车辆信息
				visible: false,
				pictureCars: [],
				modifyCarInfoDialog: false,
				//修改车辆基本信息dialog
				modifyCarInfo: {
					id: "",
					carno: "", // 车牌号
					brand: "", // 品牌
					cartype: "", // 车型
					productdate: "", // 生产日期
					carframeno: "", // 车架号
					engineno: "", // 发动机号
					carstatus: "", // 车辆状态
					licence: "", // 行车证
					registeredDate: "", //注册日期
					licencepic: "", // 行车证照片
					seatNumber: "", //座位数
					usepProperty:'',//使用性质
					isnewcar:'',//是否新能源汽车
					carOwner:'',//车辆所有人
					administrator: { //管理员
						id: "",
					},
					mileage: "" //车辆里程(KM)
				},
				//车辆详情
				carDetailsDialog: false,
				carDetails: {
					user:{
						name:'',
					},
					driver:{
						name:'',
					}
				},

				// 车辆表格信息
				carInfoTable: [],
				//人才数据数组,分页,总条数
				carInfoPageNo: 1,
				carInfoPageSize: 5,
				carInfoTotal: 0,
				//行车证照片
				carImgDialog: false,
				carLicencepic: null,

				attachedListNum: "0", //附表选项卡绑定的值

				//保养添加页面默认false
				insertMaintainCarInfoDialog: false,
				//维修添加页面默认false
				insertRepairCarInfoDialog: false,
				//保险添加页面默认false
				insertInsuranceCarInfoDialog: false,
				//年检添加页面默认为false
				insertInspectCarInfoDialog: false,
				//事故添加页面默认为false
				insertAccidentCarInfoDialog: false,

				//添加保养基本信息dialog
				addMaintainCarInfo: {
					//车辆id
					car: "",
					//保养内容
					maintainContent: "",
					//保养日期
					maintainDate: "",
					//保养地址
					maintainAddress: "",
					//保养价格
					maintainMoney: "",
					//当前公里数
					nowKilometre: "",
					//下次保养里程
					nextKilometre: "",
					ntervalkilometre: "",     //间隔里程
					taincontract: "",      //保养公司
				},
				//添加维修基本信息dialog
				addRepairCarInfo: {
					//	车辆id
					car: "",
					//当前公里数
					nowKilometre: "",
					//	维修内容
					repairContent: "",
					//	维修日期
					repairDate: "",
					//	维修地址
					repairAddress: "",
					//	维修费用
					repairMoney: "",
					repairReason: '',
          			repairCompany: '',
				},
				//添加保险基本信息dialog
				policyArra:[],
				addInsuranceCarInfo: {
					//	车辆id
					car: "",
					//	参保日期
					insuranceDate: "",
					//	保险内容
					insuranceContent: "",
					//  到期日期
					expirationDate: "",
					//  保险费用
					price: "",
					company: "",
					salesman: "",
					salesphone: "",
					policy: "",
				},
				//添加年检基本信息dialog
				drivingLicenseArra:[],
				inspectionArra:[],
				addInspectCarInfo: {
					mainid:'',
					company: '',
					area: '',
					inspection: '',
					checkdate: '',
					cotent: '',
					nextDate: '',
					drivingLicense: '',
					operator: {
					id: ''
					}
				},
				accpictureList:[],
				//添加事故基本信息dialog
				addAccidentCarInfo: {
					//	车辆id
					car: "",
					//事故id
					id: "",
					//	事故日期
					accidentdate: "",
					//	事故地点
					place: "",
					//	事故备注
					content: "",
					liability:'',
					accpicture:''
				},

				//保养编辑页面默认false
				redactMaintainCarInfoDialog: false,
				//维修添加页面默认false
				redactRepairCarInfoDialog: false,
				//保险编辑默认为false
				redactInsuranceCarInfoDialog: false,
				//年检添加页面默认为false
				redactInspectCarInfoDialog: false,
				//事故添加页面默认为false
				redactAccidentCarInfoDialog: false,

				// 保养记录
				maintainInformation: [],
				// 维修记录
				serviceInformation: [],
				// 保险记录
				insuranceInformation: [],
				// 年检记录
				annualInspectionInformation: [],
				// 车辆事故记录
				accidentInformation: [],

				//保养记录分页
				maintain_pageNo: 1,
				maintain_pageSize: 10,
				maintain_total: 0,
				//维修记录分页
				repair_pageNo: 1,
				repair_pageSize: 10,
				repair_total: 0,
				//保险记录分页
				insurance_pageNo: 1,
				insurance_pageSize: 10,
				insurance_total: 0,
				//年检记录分页
				inspect_pageNo: 1,
				inspect_pageSize: 10,
				inspect_total: 0,
				//事故车辆记录分页
				accident_pageNo: 1,
				accident_pageSize: 10,
				accident_total: 0,

				//保养记录选中的ID
				maintainCheckId: [],
				//维修记录选中的ID
				repairCheckId: [],
				//保险记录选中的ID
				InsuranceCheckId: [],
				//年检记录选中的ID
				InspectCheckId: [],
				//事故记录选中的ID
				AccidentCheckId: [],

				//编辑保养基本信息dialog
				redactMaintainCarInfo: {
					//车辆id
					car: "",
					//  保养id
					id: "",
					//	当前公里数
					nowKilometre: "",
					//	保养内容
					maintainContent: "",
					//  下次保养里程
					nextKilometre: "",
					//	保养日期
					maintainDate: "",
					//  保养地址
					maintainAddress: "",
					//	保养价格
					maintainMoney: "",
					intervalkilometre: "",     //间隔里程
					taincontract: "",      //保养公司
				},
				//编辑保险基本信息dialog
				redactInsuranceCarInfo: {
					//	车辆id
					car: "",
					//	保险id
					id: "",
					//	参保日期
					insuranceDate: "",
					//	保险内容
					insuranceContent: "",
					//到期日期
					expirationDate: "",
					//  保险费用
					price: "",
					company: "",
					salesman: "",
					salesphone: "",
					policy: "",

				},
				//编辑维修基本信息dialog
				redactRepairCarInfo: {
					//	车辆id
					car: "",
					// 维修id
					id: "",
					//当前公里数
					nowKilometre: "",
					//	维修内容
					repairContent: "",
					//	维修日期
					repairDate: "",
					//	维修地址
					repairAddress: "",
					//	维修费用
					repairMoney: "",
					repairReason: '',
          			repairCompany: '',
				},
				//编辑年检基本信息dialog
				redactInspectCarInfo: {
					mainid:'',
					company: '',
					area: '',
					inspection: '',
					checkdate: '',
					cotent: '',
					nextDate: '',
					drivingLicense: '',
					operator: {
						id: ''
					}
					
				},
				//编辑事故基本信息dialog
				redactAccidentCarInfo: {
					//	车辆id
					car: "",
					//事故id
					id: "",
					//	事故日期
					accidentdate: "",
					//	事故地点
					place: "",
					//	事故备注
					content: "",
					liability:'',
					accpicture:''

				},

				//事故转维修
				AtoMaintenanceInfoDialog:false,
				AtoMaintenanceInfo:{
					//	车辆id
					accident: "",
					//当前公里数
					nowkilometre: "",
					//	维修内容
					content: "",
					//	维修日期
					repairdate: "",
					//	维修地址
					place: "",
					//	维修费用
					price: "",
					repairReason: '',
          			repairCompany: '',
				},
				//维修转事故
				accpictureLists:[],
				maintenanceFailureDialog:false,
				maintenanceFailureInfo:{
					repair:'',
					id:'',
					driver:'',     // 驾驶人
					liability:'',     // 责任划分(%)
					accidentdate:'',      // 事故时间
					place:'',     // 事故地点
					content:'',       // 事故内容
				}
			};
		},
		components: {
			UserSelect,
		},
		activated() {
			this.getSelectUserFound();
		},
		methods: {
			cellStyles({row,column,rowIndex,columnIndex}) {
				if (row.type==1) {
					return "background-color:#CC3332;padding:0.15rem;border-left:1px solid #d6cfe2;";
				} else if (row.type==4) {
					return "background-color:#FF6601;padding:0.15rem;border-left:1px solid #d6cfe2;";
				} else if (row.type==3) {
					return "background-color:#FDFC09;padding:0.15rem;border-left:1px solid #d6cfe2;";
				} else {
					return "padding:0.15rem;border-left:1px solid #d6cfe2;border-top:1px solid #d6cfe2";
				}
			},
			//维修转事故
			maintenanceFailureDialogs(id){
				this.maintenanceFailureDialog=true;
				this.maintenanceFailureInfo.repair=id;
			},
			maintenanceFailureInfos(){
				this.$http({
					url: "/sys/oa/carinfo/repairNormal",
					method: "post",
					params: {
						carid:this.checkId,
						...this.maintenanceFailureInfo
					},
				}).then(({data}) => {
					if (data && data.success) {
						this.$message({message: data.msg,type: 'success'});
						this.getCarRepair();
						this.$refs["maintenanceFailureInfo"].resetFields();
						this.maintenanceFailureDialog=false;
					}else{
						this.$message.error(data.msg);
					}
				});
			},
			//事故转维修
			AtoMaintenanceInfoDialogs(id){
				this.AtoMaintenanceInfoDialog=true;
				this.AtoMaintenanceInfo.accident=id;
			},
			AtoMaintenanceInfos(){
				this.$http({
					url: "/sys/oa/carinfo/receiverNormal",
					method: "post",
					params: {
						carid:this.checkId,
						...this.AtoMaintenanceInfo
					},
				}).then(({data}) => {
					if (data && data.success) {
						this.$message({message: data.msg,type: 'success'});
						this.getCarAccident();
						this.$refs["AtoMaintenanceInfo"].resetFields();
						this.AtoMaintenanceInfoDialog=false;
					}else{
						this.$message.error(data.msg);
					}
				});
			},
			//维修完成
			maintenanceRecords1(mid,aid){
				this.$http({
					url: "/sys/oa/carinfo/repairNormal",
					method: "post",
					params: {
						carid:this.checkId,
						repair:mid,
					},
				}).then(({
					data
				}) => {
					if (data && data.success) {
						this.$message({message: data.msg,type: 'success'});
						this.getCarRepair();
					}else{
						this.$message.error(data.msg);
					}
				});
			},
			//事故 恢复正常
			maintenanceRecords(mid,aid){
				this.$http({
					url: "/sys/oa/carinfo/receiverNormal",
					method: "post",
					params: {
						carid:this.checkId,
						repair:mid,
						accident:aid
					},
				}).then(({
					data
				}) => {
					if (data && data.success) {
						this.$message({message: data.msg,type: 'success'});
						if(mid!=''&&aid==''){
							this.getCarRepair();
						}else{
							this.getCarAccident();
						}
					}else{
						this.$message.error(data.msg);
					}
				});
			},
			// 查询所有车辆
			getSelectUserFound() {
				this.carInfoLoading = true;
				this.$http({
					url: "/sys/oa/carinfo/findCarManage",
					method: "get",
					params: {
						pageNo: this.carInfoPageNo,
						pageSize: this.carInfoPageSize,
					},
				}).then(({
					data
				}) => {
					if (data && data.success) {
						this.carInfoTable = data.carList;
						this.carInfoTotal = data.totalCount;
					}
					this.carInfoLoading = false;
				});
			},
			//搜索条件的车辆
			searchUsers() {
				this.carInfoLoading = true;
				this.$http({
					url: "/sys/oa/carinfo/searchCar",
					method: "get",
					params: {
						pageNo: this.carInfoPageNo,
						pageSize: this.carInfoPageSize,
						...this.carInfoSearch,
					},
				}).then(({
					data
				}) => {
					if (data && data.success) {
						this.carInfoTable = data.list;
						this.carInfoTotal = data.totalCount;
						this.carInfoLoading = false;
					}
				});
			},
			//重置搜索
			resetsearchUsers() {
				this.$refs["carInfoSearch"].resetFields();
				this.getSelectUserFound();
			},

			// 顶部取消按钮
			cancelChoose(rows) {
				if (rows) {
					rows.forEach((row) => {
						this.$refs.CarInfo.toggleRowSelection(row);
					});
				} else {
					this.$refs.CarInfo.clearSelection();
				}
			},
			//顶部添加按钮
			addCar() {
				this.addCarInfoDialog = true;
			},
			// 顶部批量删除
			deleteCar() {
				let ids = this.checkCarNum
					.map((item) => {
						return item.id;
					})
					.join(",");
				this.$confirm(`确定删除所选项吗?`, "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(() => {
					this.$http({
						url: "/sys/oa/carinfo/deleteCarInfo",
						method: "post",
						params: {
							ids: ids
						},
					}).then(({
						data
					}) => {
						if (data && data.success) {
							this.$message.success(data.msg);
							this.getSelectUserFound();
						}
					});
				});
			},
			//顶部修改按钮
			modifyCar() {
				if (this.checkCarNum.length == 1) {
					this.modifyCarInfoDialog = true;
					this.pictureCars = [];
					this.modifyCarInfo = this.recover(this.modifyCarInfo, this.checkCarNum[0]);
					this.visible = true;
					this.modifyCarInfo.licencepic.split('|').forEach((item) => {
						if (item.trim().length > 0) {
							this.pictureCars.push({
								name: decodeURIComponent(item.substring(item.lastIndexOf('/') + 1)),
								url: item
							})
						}
					})
				}
			},
			// 确定添加修改车辆信息
			confirmCarAdd() {
				this.$refs.addCarInfo.validate((valid) => {
					if (valid) {
						this.$http({
							url: "/sys/oa/carinfo/addCarInfo",
							method: "post",
							data: this.addCarInfo,
						}).then(({
							data
						}) => {
							if (data && data.success) {
								this.$message.success(data.msg);
								this.visible = false
								this.addCarInfoDialog = false;
								this.$refs.addCarInfo.resetFields();
								this.getSelectUserFound();
							}
						});
					}
				});
			},
			// 确定修改修改车辆信息
			confirmCarModify() {
				this.$refs.modifyCarInfo.validate((valid) => {
					if (valid) {
						this.$http({
							url: "/sys/oa/carinfo/addCarInfo",
							method: "post",
							data: this.modifyCarInfo,
						}).then(({
							data
						}) => {
							if (data && data.success) {
								this.$message.success(data.msg);
								this.modifyCarInfoDialog = false;
								this.$refs.modifyCarInfo.resetFields();
								this.getSelectUserFound();
							}
						});
					}
				});
			},
			//点击选中的行的select
			selectiocarInfo(val) {
				if (val != "") {
					this.checkId = val[0].id;
					this.addInspectCarInfo.mainid=this.checkId;
					this.checkCarNum = val;
					this.handleClick();
				} else if (val == "") {
					this.checkId = "";
				}
			},
			//点击选中的行
			carListdetails(row) {
				console.log(row);
				this.carDetailsDialog = true;
				this.$http({
					url: "/sys/oa/carinfo/findCarInfo",
					method: "get",
					params: {
						id: row.id,
					},
				}).then(({
					data
				}) => {
					if (data && data.success) {
						this.carDetails = data.carInfo;
						// this.checkId = data.carInfo.id;
						this.getCarMaintain();
						// this.getCarRepair();
						// this.getCarInsurance();
						// this.getCarInspect();	
						// this.getCarAccident();
					}
				});
			},

			//车辆信息分页	
			carInfoHandleSize(val) {
				this.carInfoPageSize = val;
				this.carInfoPageNo = 1;
				this.getSelectUserFound();
			},
			carInfoHandleCurrent(val) {
				this.carInfoPageNo = val;
				this.getSelectUserFound();
			},

			//附表tab选项卡
			handleClick() {
				switch (this.attachedListNum) {
					case "0":
						this.getCarMaintain();
						break;
					case "1":
						this.getCarRepair();
						break;
					case "2":
						this.getCarInsurance();
						break;
					case "3":
						this.getCarInspect();
						break;
					case "4":
						this.getCarAccident();
						break;
				}
			},

			//查询保养记录
			getCarMaintain() {
				this.$http({
					url: "/sys/oa/carinfo/findCarMain",
					method: "get",
					params: {
						carId: this.checkId,
						pageNo: this.maintain_pageNo,
						pageSize: this.maintain_pageSize,
					},
				}).then(({
					data
				}) => {
					if (data && data.success) {
						this.maintainInformation = data.maintainLogList;
						this.maintain_total = data.totalCount;
					}
				});
			},
			//保养添加按钮
			addMaintainCar() {
				if (this.checkId == "") {
					this.$message({
						message: "请选择车辆",
						type: "warning",
					});
				} else {
					this.insertMaintainCarInfoDialog = true;
				}
			},
			//保养删除按钮
			maintainDel() {
				let ids = this.maintainCheckId
					.map((item) => {
						return item.id;
					})
					.join(",");
				this.$confirm(`确定删除所选项吗?`, "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(() => {
					this.$http({
						url: "/sys/oa/carinfo/deleteCarinfoMaintainLog",
						method: "post",
						params: {
							ids: ids
						},
					}).then(({
						data
					}) => {
						if (data && data.success) {
							this.$message.success(data.msg);
							this.getCarMaintain();
						}
					});
				});
			},
			//保养取消按钮
			maintainChoose(rows) {
				if (rows) {
					rows.forEach((row) => {
						this.$refs.maintainTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.maintainTable.clearSelection();
				}
			},
			//保养select发生变化
			handleMaintainSelectionChange(val) {
				if (val != "") {
					this.addMaintainCarInfo.car = val[0].id;
					this.maintainCheckId = val;
				} else if (val == "") {
					this.addMaintainCarInfo.car = "";
				}
			},
			//保养分页设置
			handleMaintainSizeChange(val) {
				this.maintain_pageSize = val;
				this.maintain_pageNo = 1;
				this.getCarMaintain();
			},
			handleMaintainCurrentChange() {
				this.maintain_pageNo = val;
				this.getCarMaintain();
			},
			//添加保养信息
			confirmMaintainCarAdd() {
				this.$http({
					url: "/sys/oa/carinfo/addCarinfoMaintainLog",
					method: "post",
					params: {
						main: this.checkId,
						nowkilometre: this.addMaintainCarInfo.nowKilometre,
						content: this.addMaintainCarInfo.maintainContent,
						nextkilometre: parseInt(this.addMaintainCarInfo.nowKilometre) +parseInt(this.addMaintainCarInfo.intervalkilometre),
						maintaindate: this.addMaintainCarInfo.maintainDate,
						place: this.addMaintainCarInfo.maintainAddress,
						price: this.addMaintainCarInfo.maintainMoney,
						intervalkilometre: this.addMaintainCarInfo.intervalkilometre,
						taincontract: this.addMaintainCarInfo.taincontract,
					},
				}).then(({
					data
				}) => {
					if (data.success) {
						this.getCarMaintain();
						this.$message.success(data.msg);
						this.insertMaintainCarInfoDialog = false;
						this.addMaintainCarInfo = {
							//车辆id
							car: "",
							//保养内容
							maintainContent: "",
							//保养日期
							maintainDate: "",
							//保养地址
							maintainAddress: "",
							//保养价格
							maintainMoney: "",
							//当前公里数
							nowKilometre: "",
							//下次保养里程
							nextKilometre: "",
							intervalkilometre: "",
							taincontract: "",
						};
					}
				});
			},
			//保养操作的编辑按钮
			redactMaintain(val) {
				console.log(val);
				this.redactMaintainCarInfoDialog = true;
				this.redactMaintainCarInfo.id = val.id;
				this.redactMaintainCarInfo.nowKilometre = val.nowkilometre;
				this.redactMaintainCarInfo.maintainContent = val.content;
				this.redactMaintainCarInfo.nextKilometre = val.nextKilometre;
				this.redactMaintainCarInfo.maintainDate = val.maintaindate;
				this.redactMaintainCarInfo.maintainAddress = val.place;
				this.redactMaintainCarInfo.maintainMoney = val.price;
				this.redactMaintainCarInfo.intervalkilometre = val.intervalkilometre;
				this.redactMaintainCarInfo.taincontract = val.taincontract;
			},
			//保养编辑的确定按钮
			confirmMaintainCarRedact() {
				this.$http({
					url: "/sys/oa/carinfo/addCarinfoMaintainLog",
					method: "post",
					params: {
						main: this.checkId,
						id: this.redactMaintainCarInfo.id,
						nowkilometre: this.redactMaintainCarInfo.nowKilometre,
						content: this.redactMaintainCarInfo.maintainContent,
						nextkilometre: parseInt(this.redactMaintainCarInfo.nowKilometre)+parseInt(this.redactMaintainCarInfo.intervalkilometre),
						maintaindate: this.redactMaintainCarInfo.maintainDate,
						place: this.redactMaintainCarInfo.maintainAddress,
						price: this.redactMaintainCarInfo.maintainMoney,
						intervalkilometre: this.redactMaintainCarInfo.intervalkilometre,
						taincontract:this.redactMaintainCarInfo.taincontract,
					},
				}).then(({
					data
				}) => {
					if (data.success) {
						this.getCarMaintain();
						this.$message.success(data.msg);
						this.redactMaintainCarInfoDialog = false;
					}
				});
			},
			//保养删除按钮
			redactMaintainDel(rowId) {
				let id = rowId;
				this.$http({
					url: "/sys/oa/carinfo/deleteCarinfoMaintainLog",
					method: "post",
					params: {
						ids: id
					},
				}).then(({
					data
				}) => {
					if (data && data.success) {
						this.$message.success(data.msg);
						this.getCarMaintain();
					}
				});
			},

			//查询维修记录
			getCarRepair() {
				this.$http({
					url: "/sys/oa/carinfo/selectCarinfoRepairLog",
					method: "get",
					params: {
						carId: this.checkId,
						pageNo: this.repair_pageNo,
						pageSize: this.repair_pageSize,
					},
				}).then(({
					data
				}) => {
					if (data && data.success) {
						this.serviceInformation = data.repairLogList;
						this.repair_total = data.totalCount;
					}
				});
			},
			//维修添加按钮
			addRepairCar() {
				if (this.checkId == "") {
					this.$message({
						message: "请选择车辆",
						type: "warning",
					});
				} else {
					this.insertRepairCarInfoDialog = true;
				}
			},
			//维修删除按钮
			repairDel() {
				let ids = this.repairCheckId
					.map((item) => {
						return item.id;
					})
					.join(",");
				this.$confirm(`确定删除所选项吗?`, "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(() => {
					this.$http({
						url: "/sys/oa/carinfo/deleteCarinfoRepairLog",
						method: "post",
						params: {
							ids: ids
						},
					}).then(({
						data
					}) => {
						if (data && data.success) {
							this.$message.success(data.msg);
							this.getCarRepair();
						}
					});
				});
			},
			//维修取消按钮
			repairChoose(rows) {
				if (rows) {
					rows.forEach((row) => {
						this.$refs.repairTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.repairTable.clearSelection();
				}
			},
			//维修select发生变化
			handleRepairSelectionChange(val) {
				if (val != "") {
					this.addRepairCarInfo.car = val[0].id;
					this.repairCheckId = val;
				} else if (val == "") {
					this.addRepairCarInfo.car = "";
				}
			},
			//维修分页设置
			handleRepairSizeChange(val) {
				this.repai_pageSiz = val;
				this.repai_pageNo = 1;
				this.getCarRepair();
			},
			handleRepairCurrentChange() {
				this.repai_pageNo = val;
				this.getCarRepair();
			},
			//添加维修信息
			confirmRepairCarAdd() {
				this.$http({
					url: "/sys/oa/carinfo/addCarinfoRepairLog",
					method: "post",
					params: {
						mainid: this.checkId,
						nowkilometre: this.addRepairCarInfo.nowKilometre,
						content: this.addRepairCarInfo.repairContent,
						repairdate: this.addRepairCarInfo.repairDate,
						place: this.addRepairCarInfo.repairAddress,
						price: this.addRepairCarInfo.repairMoney,
						repairReason: this.addRepairCarInfo.repairReason,
          				repairCompany: this.addRepairCarInfo.repairCompany,
					},
				}).then(({
					data
				}) => {
					if (data.success) {
						this.getCarRepair();
						this.$message.success(data.msg);
						this.insertRepairCarInfoDialog = false;
						this.addRepairCarInfo = {
							//	车辆id
							car: "",
							//当前公里数
							nowKilometre: "",
							//	维修内容
							repairContent: "",
							//	维修日期
							repairDate: "",
							//	维修地址
							repairAddress: "",
							//	维修费用
							repairMoney: "",
						};
					}
				});
			},
			//维修操作的编辑按钮
			redactRepair(val) {
				this.redactRepairCarInfoDialog = true;
				this.redactRepairCarInfo.id = val.id;
				this.redactRepairCarInfo.nowKilometre = val.nowkilometre;
				this.redactRepairCarInfo.repairContent = val.content;
				this.redactRepairCarInfo.repairDate = val.repairdate;
				this.redactRepairCarInfo.repairAddress = val.place;
				this.redactRepairCarInfo.repairMoney = val.price;
				this.redactRepairCarInfo.repairReason = val.repairReason;
          		this.redactRepairCarInfo.repairCompany = val.repairCompany;
			},
			//维修编辑的确定按钮
			confirmRepairCarRedact() {
				this.$http({
					url: "/sys/oa/carinfo/addCarinfoRepairLog",
					method: "post",
					params: {
						mainid: this.checkId,
						id: this.redactRepairCarInfo.id,
						nowkilometre: this.redactRepairCarInfo.nowKilometre,
						content: this.redactRepairCarInfo.repairContent,
						repairdate: this.redactRepairCarInfo.repairDate,
						place: this.redactRepairCarInfo.repairAddress,
						price: this.redactRepairCarInfo.repairMoney,
						repairReason:this.redactRepairCarInfo.repairReason ,
          				repairCompany:this.redactRepairCarInfo.repairCompany,
					},
				}).then(({
					data
				}) => {
					if (data.success) {
						this.getCarRepair();
						this.$message.success(data.msg);
						this.redactRepairCarInfoDialog = false;
					}
				});
			},
			//维修删除按钮
			redactRepairDel(rowId) {
				let id = rowId;
				this.$http({
					url: "/sys/oa/carinfo/deleteCarinfoRepairLog",
					method: "post",
					params: {
						ids: id
					},
				}).then(({
					data
				}) => {
					if (data && data.success) {
						this.$message.success(data.msg);
						this.getCarRepair();
					}
				});
			},

			//查询保险记录
			getCarInsurance() {
				this.$http({
					url: "/sys/oa/carinfo/selectCarInsuranceRecord",
					method: "get",
					params: {
						carId: this.checkId,
						pageNo: this.insurance_pageNo,
						pageSize: this.insurance_pageSize,
					},
				}).then(({
					data
				}) => {
					if (data && data.success) {
						this.insuranceInformation = data.repairRecordList;
						this.insurance_total = data.totalCount;
					}
				});
			},
			//保险添加按钮
			addInsuranceCar() {
				if (this.checkId == "") {
					this.$message({
						message: "请选择车辆",
						type: "warning",
					});
				} else {
					this.insertInsuranceCarInfoDialog = true;
				}
			},
			//保险删除按钮
			insuranceDel() {
				let ids = this.insuranceCheckId
					.map((item) => {
						return item.id;
					})
					.join(",");
				this.$confirm(`确定删除所选项吗?`, "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(() => {
					this.$http({
						url: "/sys/oa/carinfo/deleteCarinfoInsuranceLog",
						method: "post",
						params: {
							ids: ids
						},
					}).then(({
						data
					}) => {
						if (data && data.success) {
							this.$message.success(data.msg);
							this.getCarInsurance();
						}
					});
				});
			},
			//保险取消按钮
			insuranceChoose(rows) {
				if (rows) {
					rows.forEach((row) => {
						this.$refs.insuranceTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.insuranceTable.clearSelection();
				}
			},
			//保险select发生变化
			handleInsuranceSelectionChange(val) {
				if (val != "") {
					this.addInsuranceCarInfo.car = val[0].id;
					this.insuranceCheckId = val;
				} else if (val == "") {
					this.addInsuranceCarInfo.car = "";
				}
			},
			//保险分页设置
			handleInsuranceSizeChange(val) {
				this.insurance_pageSize = val;
				this.insurance_pageNo = 1;
				this.getCarInsurance();
			},
			handleInsuranceCurrentChange() {
				this.insurance_pageNo = val;
				this.getCarInsurance();
			},
			//添加保险信息
			confirmInsuranceCarAdd() {
				this.$http({
					url: "/sys/oa/carinfo/addCarinfoInsuranceLog",
					method: "post",
					params: {
						mainid: this.checkId,
						joindate: this.addInsuranceCarInfo.insuranceDate,
						enddate: this.addInsuranceCarInfo.expirationDate,
						content: this.addInsuranceCarInfo.insuranceContent,
						maintaindate: this.addInsuranceCarInfo.maintainDate,
						price: this.addInsuranceCarInfo.price,
						company: this.addInsuranceCarInfo.company,
						salesman: this.addInsuranceCarInfo.salesman,
						salesphone: this.addInsuranceCarInfo.salesphone,
						policy: this.addInsuranceCarInfo.policy,
					},
				}).then(({
					data
				}) => {
					if (data.success) {
						this.getCarInsurance();
						this.$message.success(data.msg);
						this.insertInsuranceCarInfoDialog = false;
						this.$refs.addInsuranceCarInfo.resetFields();
						this.policyArra=[];
					}
				});
			},
			//保险操作的编辑按钮
			redactInsurance(val) {
				this.redactInsuranceCarInfoDialog = true;
				this.redactInsuranceCarInfo.id = val.id;
				this.redactInsuranceCarInfo.insuranceDate = val.joindate;
				this.redactInsuranceCarInfo.expirationDate = val.enddate;
				this.redactInsuranceCarInfo.insuranceContent = val.content;
				this.redactInsuranceCarInfo.price = val.price;
				this.redactInsuranceCarInfo.company= val.company;
				this.redactInsuranceCarInfo.salesman= val.salesman;
				this.redactInsuranceCarInfo.salesphone= val.salesphone;
				this.redactInsuranceCarInfo.policy= val.policy;
				this.redactInsuranceCarInfo.policy.split('|').forEach((item) => {
					if (item.trim().length > 0) {
						this.policyArra.push({name: decodeURIComponent(item.substring(item.lastIndexOf('/') + 1)), url: item})
					}
				})
			},
			//保险编辑的确定按钮
			confirmInsuranceCarRedact() {
				this.$http({
					url: "/sys/oa/carinfo/addCarinfoInsuranceLog",
					method: "post",
					params: {
						mainid: this.checkId,
						id: this.redactInsuranceCarInfo.id,
						joindate: this.redactInsuranceCarInfo.insuranceDate,
						enddate: this.redactInsuranceCarInfo.expirationDate,
						content: this.redactInsuranceCarInfo.insuranceContent,
						maintaindate: this.redactInsuranceCarInfo.maintainDate,
						price: this.redactInsuranceCarInfo.price,
						company: this.redactInsuranceCarInfo.company,
						salesman: this.redactInsuranceCarInfo.salesman,
						salesphone: this.redactInsuranceCarInfo.salesphone,
						policy: this.redactInsuranceCarInfo.policy,
					},
				}).then(({
					data
				}) => {
					if (data.success) {
						this.getCarInsurance();
						this.$message.success(data.msg);
						this.redactInsuranceCarInfoDialog = false;
						this.policyArra=[];
					}
				});
			},
			//保险删除按钮
			redactInsuranceDel(rowId) {
				let id = rowId;
				this.$http({
					url: "/sys/oa/carinfo/deleteCarinfoInsuranceLog",
					method: "post",
					params: {
						ids: id
					},
				}).then(({
					data
				}) => {
					if (data && data.success) {
						this.$message.success(data.msg);
						this.getCarInsurance();
					}
				});
			},

			//查询年检记录
			getCarInspect() {
				this.$http({
					url: "/sys/oa/carinfo/selectCarYearInspectRecord",
					method: "get",
					params: {
						carId: this.checkId,
						pageNo: this.inspect_pageNo,
						pageSize: this.inspect_pageSize,
					},
				}).then(({
					data
				}) => {
					if (data && data.success) {
						this.annualInspectionInformation = data.carYearInspectRecordList;
						this.inspect_total = data.totalCount;
					}
				});
			},
			//年检添加按钮
			addInspectCar() {
				if (this.checkId == "") {
					this.$message({
						message: "请选择车辆",
						type: "warning",
					});
				} else {
					this.insertInspectCarInfoDialog = true;
				}
			},
			//年检删除按钮
			inspectDel() {
				let ids = this.InspectCheckId.map((item) => {
					return item.id;
				}).join(",");
				this.$confirm(`确定删除所选项吗?`, "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(() => {
					this.$http({
						url: "/sys/oa/carinfo/deleteCarYearInspectRecord",
						method: "post",
						params: {
							ids: ids
						},
					}).then(({
						data
					}) => {
						if (data && data.success) {
							this.$message.success(data.msg);
							this.getCarInspect();
						}
					});
				});
			},
			//年检取消按钮
			inspectChoose(rows) {
				if (rows) {
					rows.forEach((row) => {
						this.$refs.inspectTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.inspectTable.clearSelection();
				}
			},
			//年检select发生变化
			handleInspectSelectionChange(val) {
				if (val != "") {
					this.addInspectCarInfo.car = val[0].id;
					this.InspectCheckId = val;
				} else if (val == "") {
					this.addInspectCarInfo.car = "";
				}
			},
			//年检分页设置
			handleInspectSizeChange(val) {
				this.inspect_pageSize = val;
				this.inspect_pageNo = 1;
				this.getCarInspect();
			},
			handleInspectCurrentChange() {
				this.inspect_pageNo = val;
				this.getCarInspect();
			},
			//添加年检信息
			confirmInspectCarAdd() {
				this.$http({
					url: "/sys/oa/carinfo/addCarYearInspectRecord",
					method: "post",
					data:this.addInspectCarInfo,
				}).then(({
					data
				}) => {
					if (data.success) {
						this.getCarInspect();
						this.$message.success(data.msg);
						this.insertInspectCarInfoDialog = false;
						this.$refs['addInspectCarInfo'].resetFields();
						this.drivingLicenseArra=[];
						this.inspectionArra=[];
					}
				});
			},
			//年检操作的编辑按钮
			redactInspect(val) {
				console.log(val);
				this.redactInspectCarInfoDialog = true;
				this.redactInspectCarInfo.id=val.id;
				this.redactInspectCarInfo.mainid=val.mainid.id;
				this.redactInspectCarInfo.checkdate=val.checkdate;
				this.redactInspectCarInfo.cotent=val.cotent;
				this.redactInspectCarInfo.nextDate=val.nextDate;
				this.redactInspectCarInfo.drivingLicense=val.drivingLicense;
				this.redactInspectCarInfo.operator.id=val.operator.id;
				this.redactInspectCarInfo.operator.name=val.operator.name;
				this.redactInspectCarInfo.company=val.company;
          		this.redactInspectCarInfo.area=val.area;
				this.drivingLicenseArra=[];
				this.inspectionArra=[];
				this.redactInspectCarInfo.inspection.split('|').forEach((item) => {
					if (item.trim().length > 0) {
						this.inspectionArra.push({name: decodeURIComponent(item.substring(item.lastIndexOf('/') + 1)), url: item})
					}
				})
				this.redactInspectCarInfo.drivingLicense.split('|').forEach((item) => {
				  if (item.trim().length > 0) {
					this.drivingLicenseArra.push({name: decodeURIComponent(item.substring(item.lastIndexOf('/') + 1)), url: item})
				  }
				})
			},
			//年检编辑的确定按钮
			confirmInspectCarRedact() {
				this.$http({
					url: "/sys/oa/carinfo/addCarYearInspectRecord",
					method: "post",
					data:this.redactInspectCarInfo,
				}).then(({
					data
				}) => {
					if (data.success) {
						this.getCarInspect();
						this.$message.success(data.msg);
						this.redactInspectCarInfoDialog = false;
					}
				});
			},
			//年检删除按钮
			redactInspectDel(rowId) {
				let id = rowId;
				this.$http({
					url: "/sys/oa/carinfo/deleteCarYearInspectRecord",
					method: "post",
					params: {
						ids: id
					},
				}).then(({
					data
				}) => {
					if (data && data.success) {
						this.$message.success(data.msg);
						this.getCarInspect();
					}
				});
			},

			//查询事故记录
			getCarAccident() {
				this.$http({
					url: "/sys/oa/carinfo/selectCarAccidentRecord",
					method: "get",
					params: {
						carId: this.checkId,
						pageNo: this.maintain_pageNo,
						pageSize: this.maintain_pageSize,
					},
				}).then(({
					data
				}) => {
					if (data && data.success) {
						this.accidentInformation = data.accidentRecordList;
						this.accident_total = data.totalCount;
					}
				});
			},
			//事故添加按钮
			addAccidentCar() {
				if (this.checkId == "") {
					this.$message({
						message: "请选择车辆",
						type: "warning",
					});
				} else {
					this.insertAccidentCarInfoDialog = true;
				}
			},
			//事故删除按钮
			accidentDel() {
				let ids = this.accidentCheckId
					.map((item) => {
						return item.id;
					})
					.join(",");
				this.$confirm(`确定删除所选项吗?`, "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(() => {
					this.$http({
						url: "/sys/oa/carinfo/deleteCarAccidentRecord",
						method: "post",
						params: {
							ids: ids
						},
					}).then(({
						data
					}) => {
						if (data && data.success) {
							this.$message.success(data.msg);
							this.getCarAccident();
						}
					});
				});
			},
			//事故取消按钮
			accidentChoose(rows) {
				if (rows) {
					rows.forEach((row) => {
						this.$refs.accidentTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.accidentTable.clearSelection();
				}
			},
			//事故select发生变化
			handleAccidentSelectionChange(val) {
				if (val != "") {
					this.addAccidentCarInfo.car = val[0].id;
					this.accidentCheckId = val;
				} else if (val == "") {
					this.addAccidentCarInfo.car = "";
				}
			},
			//事故分页设置
			handleAccidentSizeChange(val) {
				this.accident_pageSize = val;
				this.accident_pageNo = 1;
				this.getCarAccident();
			},
			handleAccidentCurrentChange() {
				this.accident_pageNo = val;
				this.getCarAccident();
			},
			//添加事故信息
			confirmAccidentCarAdd() {
				this.$http({
					url: "/sys/oa/carinfo/addCarAccidentRecord",
					method: "post",
					params: {
						mainid: this.checkId,
						accidentdate: this.addAccidentCarInfo.accidentdate,
						place: this.addAccidentCarInfo.place,
						content: this.addAccidentCarInfo.content,
						driver:this.addAccidentCarInfo.driver,
          				liability:this.addAccidentCarInfo.liability,
          				accpicture:this.addAccidentCarInfo.accpicture,
					},
				}).then(({
					data
				}) => {
					if (data.success) {
						this.getCarAccident();
						this.$message.success(data.msg);
						this.insertAccidentCarInfoDialog = false;
						this.$refs['addAccidentCarInfo'].resetFields();
						this.accpictureList=[];
					}
				});
			},
			//事故操作的编辑按钮
			redactAccident(val) {
				this.redactAccidentCarInfoDialog = true;
				this.redactAccidentCarInfo.id = val.id;
				this.redactAccidentCarInfo.accidentdate = val.accidentdate;
				this.redactAccidentCarInfo.place = val.place;
				this.redactAccidentCarInfo.content = val.content;
				this.redactAccidentCarInfo.driver= val.driver;
				this.redactAccidentCarInfo.liability=val.liability;
				this.redactInspectCarInfo.accpicture=val.accpicture;
				this.accpictureList=[];
				this.redactInspectCarInfo.accpicture.split('|').forEach((item) => {
					if (item.trim().length > 0) {
						this.accpictureList.push({name: decodeURIComponent(item.substring(item.lastIndexOf('/') + 1)), url: item})
					}
				})
			},
			//事故编辑的确定按钮
			confirmAccidentCarRedact() {
				this.$http({
					url: "/sys/oa/carinfo/addCarAccidentRecord",
					method: "post",
					params: {
						mainid: this.checkId,
						id: this.redactAccidentCarInfo.id,
						accidentdate: this.redactAccidentCarInfo.accidentdate,
						place: this.redactAccidentCarInfo.place,
						content: this.redactAccidentCarInfo.content,
						driver:this.redactAccidentCarInfo.driver,
          				liability:this.redactAccidentCarInfo.liability,
						accpicture:this.redactAccidentCarInfo.accpicture,
					},
				}).then(({
					data
				}) => {
					if (data.success) {
						this.getCarAccident();
						this.$message.success(data.msg);
						this.redactAccidentCarInfoDialog = false;
					}
				});
			},
			//事故删除按钮
			redactAccidentDel(rowId) {
				let id = rowId;
				this.$http({
					url: "/sys/oa/carinfo/deleteCarAccidentRecord",
					method: "post",
					params: {
						ids: id
					},
				}).then(({
					data
				}) => {
					if (data && data.success) {
						this.$message.success(data.msg);
						this.getCarAccident();
					}
				});
			},
		},
	};
</script>
<style scoped>
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409eff;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		text-align: center;
	}

	.avatar {
		display: block;
	}
</style>
